Issue
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
Solution
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>
Answered By - Shreeraj
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.