javascript Vue 警告 - 无法使用“in”运算符来搜索“[object Array]”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47505988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue warn - Cannot use 'in' operator to search for '[object Array]'
提问by Igor Cantelmo
Well,
好，
I'm trying to do a project of an a Shopping cart with vue.js, and the browser Console is showing this error:
我正在尝试使用 vue.js 做一个购物车项目，并且浏览器控制台显示此错误：
vue.common.js:576 [Vue warn]: Error in created hook: "TypeError: Cannot use 'in' operator to search for '[object Array]' in products"
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>
What can I do?
我能做什么？
I tried a lot of things and still without success =(
我尝试了很多东西，但仍然没有成功=（
回答by Meet Zaveri
First of all you component name in template is "product" and also the key in for loop is also "product". Either you change Component name to suitable name like.
首先，模板中的组件名称是“product”，for 循环中的键也是“product”。要么将组件名称更改为合适的名称，例如。
And you must have forgot to give a name(assign a name of component for tepmplate) to component which you imported. You cannot use imported component just like that without giving it reference name to use it in template.
并且您必须忘记为导入的组件命名（为模板指定组件名称）。你不能像那样使用导入的组件而不给它引用名称以在模板中使用它。
components: { Product:productName, ShoppingCart: shoppingCart }
This way you use <product-name> </product-name>in template and so after that in for loop, the product in prodcutswill work.
这样你<product-name> </product-name>在模板中使用，然后在 for 循环中使用，product in prodcuts将工作。
Also products array should not work with this way. It should be in computed hook.
产品阵列也不应该以这种方式工作。它应该在计算挂钩中。
computed ={}
Or I should suggest you should directly asssign it in data()
或者我应该建议你直接赋值 data()
回答by hamidreza nikoonia
for better working , in the $set method in VUE
为了更好地工作，在 VUE 的 $set 方法中
the first arg for pass 'this' keyword
传递'this'关键字的第一个参数
some thing like this
像这样的事情
this.$set(this,'your_object', value)
and notice second arg must be String
并注意第二个 arg 必须是 String
回答by Neelotpal
I think the problem is with $set method, you need to specify the object as 1st parameter, see full doc here
我认为问题出在 $set 方法上，您需要将对象指定为第一个参数，请在此处查看完整文档
so you need to do something like this:this.$set(this.products, dummy)also this will not give you 4 products in the v-for loop. I would suggest to assign the products directly in data()
所以你需要做这样的事情：this.$set(this.products, dummy)这也不会在 v-for 循环中给你 4 个产品。我建议直接在 data() 中分配产品
