Arrays 将数组传递给Vuejs中的道具

我将一个值列表从父组件传递给其子组件，并希望接收所有值，但只接收最后一个值

这是父组件的代码：

     <app-spider-web
     v-for="skill in skills"
     :name="skill.name"
     :required="skill.required"
     :vMode1="skill.vMode1"
     ></app-spider-web>

   ...       


   skills: [
      {
        name: 'Frozen Yogurt',
        required: 1,
        vMode1: ''
      },
      {
        name: 'Ice cream sandwich',
        required: 3,
        vMode1: ''
      },
      {
        name: 'Eclair',
        required: 1,
        vMode1: ''
      }
    ]

props:['name','required','vMode1']

---

这样我一个接一个地接收数据，如果我想打印例如“name”，它只显示列表中的姓氏，即“Eclair”，而我想在子组件中有一个包含所有名称的数组。最好的方法是什么？

像这样，您将在子组件数组中收到当前项的名称和索引，这样您就可以在子组件中只获得项的名称

另外，不要忘记在使用v-for指令的地方添加unique键

Parent.vue

<template>
  <div>
    <child
      v-for="(skill, index) in skills.length"
      :key="skill.name"
      :index="index"
      :names-array="skills.map(a => a.name)"
    />
  </div>
</template>

<script>
import Child from './Child'

export default {
  name: 'Parent',

  components: {
    Child
  },

  data () {
    return {
      skills: [
        {
          name: 'Frozen Yogurt',
          required: 1,
          vMode1: ''
        },
        {
          name: 'Ice cream sandwich',
          required: 3,
          vMode1: ''
        },
        {
          name: 'Eclair',
          required: 1,
          vMode1: ''
        }
      ]
    }
  }
}
</script>

从“./Child”导入子项
导出默认值{
名称：'父'，
组成部分：{
小孩
},
数据（）{
返回{
技能：[
{
名称：“冷冻酸奶”，
所需：1，
vMode1:“”
},
{
名称：“冰淇淋三明治”，
所需：3，
vMode1:“”
},
{
名称：“Eclair”，
所需：1，
vMode1:“”
}
]
}
}
}

Child.vue

<template>
  <div>
    <div>Index: {{ index }}</div>
    <div>Names Array: {{ namesArray }}</div>
    <div>Name: {{ namesArray[index] }}</div>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: ["names-array", "index"]
};
</script>

索引：{{Index}}
名称数组：{{namesArray}}
名称：{{namesArray[index]}
导出默认值{
姓名：“儿童”，
道具：[“名称数组”，“索引”]
};

输出：

索引：0名称数组：[“冷冻酸奶”、“冰淇淋三明治”， “Eclair”]名称：冷冻酸奶

索引：1名称数组：[“冷冻酸奶”、“冰淇淋三明治”， 名称：冰淇淋三明治

索引：2个名称数组：[“冷冻酸奶”、“冰淇淋三明治”， “Eclair”]名称：Eclair

---

这是不可能的，因为在每个循环中，都会生成组件的新实例。为什么不将整个列表传递给组件？如果您需要组件中的列表，而不是单个元素中的列表，是否有任何特定的原因需要循环列表？请看这个示例。有几件事，您应该使用data（）作为函数（），另一件事是您不应该直接使用“vMode1”字段对数据进行变异，而应该使用Vuex发出事件或使用中央存储。@Rehmat I也可以传递整个列表。然而，我只需要访问子组件中列表的name属性。有办法吗？@mvallarino使用vuex目前还不是一个选项，不幸的是：(