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

【问题标题】：Vue warn - Cannot use 'in' operator to search for '[object Array]'Vue 警告 - 无法使用“in”运算符搜索“[object Array]”
【发布时间】：2018-05-10 09:35:47
【问题描述】：

嗯，

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

vue.common.js:576 [Vue warn]: Error in created hook: "TypeError: Cannot use 'in' operator to search '[object Array]' in products"

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

我能做什么？

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

【问题讨论】：

推入产品数组而不是$set，this.products.push({id: 1, title: 'Name of Product 1', price: 40, image: 'product.png'}, { the others })

标签： javascript vue.js

【解决方案1】：

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

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

components: { Product:productName, ShoppingCart: shoppingCart }

这样你在模板中使用<product-name> </product-name>，然后在for循环中使用product in prodcuts。

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

computed ={}

或者我应该建议你直接在data()赋值

【讨论】：

【解决方案2】：

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

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

类似的东西

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

注意第二个参数必须是字符串

【讨论】：

【解决方案3】：

我认为问题在于 $set 方法，您需要将对象指定为第一个参数，请参阅完整文档here

所以你需要做这样的事情：this.$set(this.products, dummy) 这也不会在 v-for 循环中为您提供 4 个产品。我建议直接在 data() 中分配产品

【讨论】：

我使用了这个：this.$set(this.products, 'products', dummy) 并且只为你所说的一种产品工作。我怎样才能使 v-for 循环工作？？？感谢您的支持！
最好的办法是直接在data()函数中赋值数组，不用dummy var。其他方法是使用 Object.assign ，例如：Object.assign(this.products, dummy)