6

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

这是父组件的代码：

     <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'，而我想在子组件中有一个包含所有名称的数组。最好的方法是什么？

4

1 回答 1

5

像这样，您将在子组件中收到名称数组，以及当前项目的索引，因此您可以只获取子组件中项目的名称。

也不要忘记在使用 v-for 指令的地方添加唯一键。

父.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>

孩子.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>

输出：

索引：0 Names Array: [ "Frozen Yogurt", "Ice cream sandwich", "Eclair" ] Name: Frozen Yogurt

索引：1 Names Array: [ "Frozen Yogurt", "Ice cream sandwich", "Eclair" ] Name: 冰淇淋三明治

索引：2 名称数组：[“冷冻酸奶”、“冰淇淋三明治”、“埃克莱尔”] 名称：埃克莱尔

于 2019-08-13T22:07:01.220 回答