javascript - 从 Vuejs 中动态创建的数组中的对象中检索值

Question

我正在使用 vue 和 django 构建一个购物应用程序，并使用 axios 通过 api 获取 .js 文件中的库存产品。

我从数据库获取数据的 .js 文件:

  delimiters: ['[[', ']]'],
  data: {
    inventory: [],
    merchants: [],
    cart: [],
  },
  ...,
  mounted: function  (){
    axios
      .get("http://127.0.0.1:8000/get_products/").then(response => {
        (this.inventory = response.data)
        return axios.get("http://127.0.0.1:8000/get_merchants/")
      })
      .then(response => {
        (this.merchants = response.data)
      })
  },

我能够使用以下 html 在我的模板中成功显示结果:

<div class="main_block">
  <div class="products" v-for="product in inventory">
    <div class="mini_block info_block">
      <div class="left merch_img_holder"></div>
      <h1 class="left info">[[ product.fields.merchant ]]</h1>
      <div class="clear"></div>
    </div>
    <div class="product_image">
      <img v-bind:src="/media/+[[ product.fields.image ]]" width="420" alt="Image">
    </div>
    <div class="mini_block info_block">
      <div class="left info">
        <div class="">[[ product.fields.name ]]</div>
        <div class="">[[ product.fields.price ]]</div>
      </div>
      <div class="right info">
        <i class="fas fa-caret-square-down" @click="deleteFromCart([[ product ]])"></i>
        <i class="fas fa-caret-square-up" @click="addToCart([[ product ]])"></i>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</div>

我正在尝试使用 <i class="fas fa-caret-square-up" @click="addToCart()"></i> 将商品添加到我的购物车(靠近我的 html 底部)。我的 addToCart() 函数如下所示:

addToCart(product){
  this.cart.push(product)
},

这实际上更新了购物车 - 我知道这一点是因为我有一个返回 this.cart.length 的计算属性每当我点击“添加到购物车”时。

我需要显示购物车中的商品(在我的购物车 View 中)。我正在尝试使用以下 html 来执行此操作:

<div v-for="(item, index) in cart" class="cart_item">
  <div class="cart_img_holder">
    <img v-bind:src="/media/+[[ item.image ]]" width="80" alt="Image">
  </div>
  <ul class="cart_item_detail">
    <h3>[[ item.name ]]</h3>
    <li>[[ item.price ]]</li>
    <li>[[ item.merchant ]]</li>
    <li>Qty: [[ item.qty ]] | <a @click="removeFromCart(index)">Delete</a></li>
  </ul>
</div>

问题是它要么向购物车添加空物体，要么我无法检索这些元素。将购物车项目记录到控制台会产生未定义的结果。如何显示购物车中的元素？

Answer 1

您没有在 addToCart 方法中传递任何值。这就是为什么始终未定义被插入购物车数组的原因。