Vue警告 - 不能使用'in'运算符来搜索'[object Array]'

Question

好，

我正在尝试使用vue.js进行购物车的项目，并且浏览器控制台显示此错误：

vue.common.js：576 [Vue警告]：创建的钩子出错：“TypeError：不能使用'in'运算符来搜索产品中的'[object Array]'”

// App.vue

<template>
  <div class="container">
      <div class="products">
        <div class="clearfix">
          <product v-for="product in products" :key="product"></product>
        </div>
      </div>
      <div class="shopping-cart">
        <shopping-cart></shopping-cart>
      </div>
  </div>
</template>

<script>

import ShoppingCart from './components/ShoppingCart.vue'
import Product from './components/Product.vue'

export default {
  created () {
    // dados mockados
    var dummy = [
      {id: 1, title: 'Name of Product 1', price: 40, image: 'product.png'},
      {id: 2, title: 'Name of Product 2', price: 90, image: 'product.png'},
      {id: 3, title: 'Name of Product 3', price: 10, image: 'product.png'},
      {id: 4, title: 'Name of Product 4', price: 20, image: 'product.png'}
    ];

    this.$set('products', dummy)
  },
  data () {
    return {
      products: []
    }
  },
  components: { Product, ShoppingCart }
}

</script>

我能做什么？

我尝试了很多东西但仍然没有成功=（

Answer 1

首先，模板中的组件名称是“product”，而for循环中的键也是“product”。您可以将组件名称更改为合适的名称。

而且您必须忘记为导入的组件指定名称（为tepmplate指定组件名称）。您不能使用导入的组件而不给它引用名称以在模板中使用它。

components: { Product:productName, ShoppingCart: shoppingCart }

这样你在模板中使用<product-name> </product-name>，因此在for循环之后，product in prodcuts将起作用。

产品数组也不应该以这种方式工作。它应该是计算机挂钩。

computed ={}

或者我建议你应该直接在qazxsw poi中分配它

Answer 2

为了更好地工作，在VUE中的$ set方法中

传递'this'关键字的第一个arg

这样的事情

data()

并注意第二个arg必须是String

Answer 3

我认为问题是使用$ set方法，你需要将对象指定为第一个参数，请参阅完整文档this.$set(this,'your_object', value)

所以你需要做这样的事情：here这也不会给你v-for循环中的4个产品。我建议直接在data（）中分配产品