Передача массива в реквизит в Vuejs

Question

Я передаю список значений от родительского компонента его дочернему элементу и хочу получить все значения, но я получаю только последнее.

Это код для родительского компонента:

     <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']

Таким образом, я получаю данные один за другим, и если я хочу напечатать, например, "имя", в списке отображается только фамилия "Эклер", тогда как я хочу иметь массив в дочерних компонентах со всеми именами в них. Какой лучший способ сделать это?

Answer 1

Таким образом, вы получите массив имен дочерних компонентов и индекс текущего элемента, так что вы можете получить только имя элемента в дочернем компоненте.

Также не забудьте добавить уникальный ключ, где вы используете директиву v-for.

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.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 Имена Массив: [ "Замороженный йогурт", "Сэндвич с мороженым", "Эклер" ] Название: Замороженный йогурт

Указатель: 1 наименование Массив: [ "Замороженный йогурт", "Сэндвич с мороженым", "Эклер" ] Наименование: Сэндвич с мороженым

Указатель: 2 наименования Массив: [ "Замороженный йогурт", "Сэндвич с мороженым", "Эклер" ] Название: Эклер