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工具时，它会给我未定义的道具

meat undefined props sample

Answer 1

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

更改此：

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

对此：

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

Answer 2

v-for指令不会自动将属性分配给生成的组件；它只是使该变量在范围内可用，然后让您随心所欲地对其进行操作。这包括对其执行简单的操作，或将其作为道具提供给重复组件的子组件而不是根。

您实际需要做的是：

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

它看起来可能是重复的，但是有必要给您更多自由度，以便您可以精确地使用数组的元素。

Vue JS道具甚至在父级中声明了不确定的内容

2 个答案: