Vue 警告 - 无法使用“in”运算符搜索“\[object Array\]”

Question

出色地，

我正在尝试使用 vue.js 做一个购物车项目，浏览器控制台显示此错误：

vue.common.js:576 [Vue warn]: 创建钩子时出错：“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>

我能做些什么？

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

原文由 Igor Cantelmo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

而且您一定忘记了为导入的组件命名（为模板分配组件名称）。如果不给它引用名称以在模板中使用它，就不能像那样使用导入的组件。

 components: { Product:productName, ShoppingCart: shoppingCart }

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

产品数组也不应该以这种方式工作。它应该在计算钩子中。

 computed ={}

或者我应该建议你直接在 data() 中分配它

原文由 Meet Zaveri 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

传递“this”关键字的第一个参数

像这样的事情

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

并注意第二个参数必须是 String

原文由 hamidreza nikoonia 发布，翻译遵循 CC BY-SA 3.0 许可协议