Passing an array to a prop in Vuejs

Question

I pass a list of values from a parent component to its child and want to receive all of the values but I only receive the last one.

This is the code for the parent component:

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

And this is the code for the child component:

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

This way I receive the data one by one and if I want print for instance 'name' it only shows the last name in the list which is 'Eclair' whereas I want to have an array in child components with all the names in them. What's the best way to do it?

That's not possible, because in each loop, a new instance of the component is generated. Why don't you pass the entire list to the component? Is there any specific reason to loop over the list if you need the list in your component, not an individual element? — Rehmat
– Rehmat, Commented Aug 13, 2019 at 21:42
Look at this example codesandbox.io/s/vue-single-file-component-vvi8n. A few things, you should use data() as a function (vuejs.org/v2/guide/components.html#data-Must-Be-a-Function), another thing is that you should´t mutate directly the data with the 'vMode1' field, instead emit events or use a central store with Vuex. — mvallarino
– mvallarino, Commented Aug 13, 2019 at 22:30
@Rehmat I can pass the entire list as well. However I only need to access list's name property in child component. Is there a way to do it? — seyet
– seyet, Commented Aug 14, 2019 at 16:40
@mvallarino using vuex is not an option at the moment unfortunately :( — seyet
– seyet, Commented Aug 14, 2019 at 16:42

Diego Armando Maradona · Accepted Answer · 2019-08-13 22:07:01Z

Like this you will receive in the child component array of names, and index of the current item, so you can get just the name of the item in the child component.

Also don't forget to add unique key where you use v-for directive.

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>

Output:

Index: 0 Names Array: [ "Frozen Yogurt", "Ice cream sandwich", "Eclair" ] Name: Frozen Yogurt

Index: 1 Names Array: [ "Frozen Yogurt", "Ice cream sandwich", "Eclair" ] Name: Ice cream sandwich

Index: 2 Names Array: [ "Frozen Yogurt", "Ice cream sandwich", "Eclair" ] Name: Eclair

Collectives™ on Stack Overflow

Passing an array to a prop in Vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related