Vue警告-不能使用'in‘操作符搜索’[对象数组]‘

Question

井,

我试图用vue.js完成购物车的项目，浏览器控制台显示了这个错误：

vue.common.js:576 Vue警告:创建钩子中的错误："TypeError:无法使用' in‘运算符在产品中搜索'object’“

// 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

首先，模板中的组件名称是“产品”，而for循环中的关键也是“产品”。或者将组件名更改为适当的名称，例如。

您一定忘了给导入的组件指定名称(为tepmplate指定组件名称)。如果不在模板中使用导入组件的引用名，就不能像这样使用导入的组件。

components: { Product:productName, ShoppingCart: shoppingCart }

通过这种方式，您可以在模板中使用<product-name> </product-name>，然后在for循环中使用product in prodcuts。

此外，产品数组不应该以这种方式工作。它应该在电脑钩子里。

computed ={}

或者我建议你直接在data()上签名

Answer 2

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

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

像这样的事情

this.$set(this,'your_object', value)

请注意，第二个arg必须是字符串。

Answer 3

我认为问题在于$set方法，您需要将对象指定为第一个参数，请参见完整的doc 这里

因此，您需要这样做：this.$set(this.products, dummy)，这也不会给您在v-for循环中的4种产品。我建议直接在data()中分配产品。