VUE JS道具使未定义的父母在父母中宣布

Question

嗨，我试图将根数据传递给我的组件，我有3种类型的数据。其中2个作品，所有人都有相同的代码，但是我的一个数据在我的道具中给出了不确定的。这是样本

<my-component v-for="(meat, index) in meats" :key="meat.id" :index="index"></my-component>
---vue script----
Vue.component('my-component', {
     props:['index', 'meat'],
     template: 
     `
     <div>
        <input v-model="meat.kilo"></input>
     </div>
     `,
})

let App = new Vue({
el: "#app",
data: {
   meats: [{
      id:1,
      kilo: 50,
      type: chicken
   ]}.....

在那里，很简单，但是当我检查我的Vue Dev工具时，它会给我不确定的道具

肉不确定的道具样本

Answer 1

v-for指令不会自动将属性分配给生成的组件；它只是使该变量在范围中可用，然后让您对其进行您的需求。这包括对其进行简单操作，或将其作为道具将重复组件的子组件而不是将其作为支撑。

您实际需要做的是：

<my-component v-for="(meat, index) in meats" :meat="meat" :key="meat.id" :index="index"></my-component>

它看起来可能重复，但是有必要为您提供更多的自由，以确切地使用数组的元素。

Answer 2

实际上，您没有index和meat作为Prop，而是meats。所以

更改此内容：

props:('index', 'meat'),

：

props:['meats'], // also to note, it's in array syntax