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

我正在使用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。

我需要在购物车中显示商品（在购物车视图中）。我正在尝试使用以下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>

问题在于它要么在购物车中添加了空对象，要么无法检索这些项目。将购物车项目记录到控制台将产生未定义的信息。如何显示购物车中的对象？

最佳答案

我以错误的方式传递产品，即@click="addToCart([[ product ]])"而不是@click="addToCart(product)"

关于javascript - 从Vuejs中动态创建的数组中的对象检索值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59827837/