Cannot dynamically pass a prop to a component within a v-for loop in Vue js

Question

I have an array sheets initialised in data, has an item pushed to it when a button is pressed

data() {
    return {
        sheets: []
    };
}

And in the html I'm trying to add a Card component for each element in this array and pass the data as a prop, but none of the components get rendered and there is no error message. I also tried putting the v-for directly on the component but it has the same result

<div id="sheets">
    <template v-for="c in sheets">
        <Card :info="c"/>
    </template>
</div>

Meanwhile if I do something like this, it displays all the data in the array correctly, so I dont understand whats going wrong here

<div id="sheets">
    <template v-for="c in sheets">
        <span>{{c}}</span>
    </template>
</div>

--

Solution In my component the data from prop was being manipulated in the created() function, it works after I did this in the mounted() function instead

Welcome to SO. Can you please add your code implemented in the Card component? — Shreeraj
– Shreeraj, Commented Jul 19, 2022 at 13:45

Shreeraj · Accepted Answer · 2022-07-19 14:10:03Z

1

Make sure you have following things done correctly:

Imported your Card component
Passing and accessing the props
There are no conflicts in the variable names and id names

Next thing you need to know and is a must while using v-for is adding :key to the element which acts as unique id and lets Vue detect that each element is unique inside the v-for. One thing to be noted while using :key is that, you cannot use :key on the <template> tag.

Adding a validation using v-if would be a good idea, so v-for only executes if the array is not empty.

<div id="sheets">
    <template v-if="sheets.length">
        <Card v-for="(sheet,index) in sheets" :key="index" :info="sheet" />
    </template>
</div>

Edit 1: As mentioned by Michal in the comments section that using index can lead to difficulties while debugging issues. You can use either :key="sheet" or if sheet is object including some unique id in it, then use :key="sheet.id" and get rid of the index

// use this if sheet is not an object
<div id="sheets">
    <template v-if="sheets.length">
        <Card v-for="sheet in sheets" :key="sheet" :info="sheet" />
    </template>
</div>

OR

// use this if sheet is an object having some unique id in it
<div id="sheets">
    <template v-if="sheets.length">
        <Card v-for="sheet in sheets" :key="sheet.id" :info="sheet" />
    </template>
</div>

edited Jul 19, 2022 at 14:10

answered Jul 19, 2022 at 13:55

Shreeraj

7671 gold badge9 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Michal Levý Over a year ago

Note that using index as key is generally bad idea and can lead to a very hard to debug problems\

Shreeraj Over a year ago

@MichalLevý Noted sir. Something new for me as well as I never got into debugging problems because of it. I am aware that we can use some unique id as well that we have either inside the object or the element of the array itself, but mostly I use index

Desk Over a year ago

Thanks for your help, I am curious why is key a must? I was able to find a fix without it so wondering what it actually does

Shreeraj Over a year ago

I have already mentioned in the answer. As when the v-for is used, same HTML elements inside the v-for is generated multiple times. There must be something unique to make each dynamically generated element different and that is done with the help of :key. For better understanding you can refer here in the docs as well.

Desk Over a year ago

I do not have enough reputation to upvote

Rohìt Jíndal · Accepted Answer · 2022-07-19 14:14:52Z

0

As :key is not mandatory, It should work without that as well. I just created a working fiddle below. Please have a look and try to find out the root cause.

Vue.component('card', {
  props: ['info'],
  template: '<span>{{ info }}</span>',
});

var app = new Vue({
  el: '#app',
  data: {
        sheets: [],
      count: 0
  },
  methods: {
    create() {
      this.count++;
        this.sheets.push('Sheet' + this.count);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="create">Create a Card!</button>
  <template v-for="c in sheets">
    <Card :info="c"></Card>
  </template>
</div>

answered Jul 19, 2022 at 14:14

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

3 Comments

Shreeraj Over a year ago

:key is not mandatory but IMHO one must use it because :key with v-for is standard and best practice.

Rohìt Jíndal Over a year ago

@Shreeraj Yeah that's correct. I mean that this issue is not related to :key attribute. I think I did not convey that properly.

Shreeraj Over a year ago

yep. the question was missing a part of code where the props was being accessed. I just mentioned it in the answer that make sure the props are accessed correctly and along with it I thought to share the importance of :key while using v-for. I hope that makes sense.

Collectives™ on Stack Overflow

Cannot dynamically pass a prop to a component within a v-for loop in Vue js

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related