Develop Reference

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

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

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>

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>

Vue - transition-group not working with different type of components

I have a project where I use Vue Transitions in order to animate the sorting and filtering a grid containing car components. Each grid elements contains one car-component.
The problem is that the user can invite new users to the platform. Those new users/cars are not the same objects as the existing objects that each is shown in a car-component. In these new objects I show different type of data/information.
This is why I have chosen to show these 'new' users using a different type of component then the car-components.
The problem is that both components need to be shown inside the same CSS grid. But when I try to add both components inside a transition group, that transition group breaks and it no longer performs the sorting animations.
<transition-group class="grid">
<InvitedUsers v-for="invite in Invited" />
<Users v-for"user in Users" />
</transition-group>
Is there a way around this? Can I add bot set of items inside the same CSS grid and still have the transition group do its work? I have tried the following, but it doesn't work because both set of items are created in different grids. But this way the transition-group works again.
<div class="grid">
<InvitedUsers v-for="invite in Invited" />
</div>
<transition-group class="grid">
<Users v-for"user in Users" />
</transition-group>

I have struggled with the same issue once. We can not directly wrap components inside <transition-group>, there has to be another wrapper around the component.
Here is an example
<transition-group class="grid">
<div v-for"user in Users">
<Users />
</div>
<div v-for="invite in Invited">
<InvitedUsers />
</div>
</transition-group>
You may have to adjust your grid container a little bit.

Iterating slot content for iterated slots in child component in Vue.js

I've got a child component (that I cannot edit) where each row in an object is rendered inside a div with a specific slot, and I'd need to pass data from the parent for each of those elements. I'm trying to iterate through every element of the object in the parent component, generate a slot and pass the desired code to the child, but unfortunately I can't manage to and I can't find any material to support me.
The child component:
<div class="slotchildren" v-for="(child, childindex) in row.elementChildren" :key="childindex">
<span>element nr. {{child.id}}</span>
<slot :name="`element-child-${row[idlabel]}-${childindex}`" :row="child">
...
</slot>
</div>
The parent component (not working):
<template v-for="row in rows"> -->
<template v-slot:`element-row-${row.id}`="{row}">
//--> [vue/valid-v-slot] 'v-slot' directive doesn't support any modifier
//--> [vue/valid-v-slot] 'v-slot' directive must be owned by a custom element, but 'template' is not.
<span>{{row.name}}</span>
</template>
</template>
Is something like this feasible and how? If it's not, what could be a viable workaround, consideind that I can't edit the child component?
Thanks in advance.

I solved it with the following synthax:
<template v-for="row in rows" v-slot:[`element-row-${row.id}`]>
..
</template>

Vuejs - Passing parent component props to child element with the template

The problem I'm trying to solve is I want the child component to react when a v-expansion panel is expanded/contracted.
Normally this would be trivial, however, I'm attempting to pass a value from a prop within a vuetify component to component via a scoped slot. Because I'm rendering the child components within a loop, I can't just use Data to bind the prop.
<v-expansion-panel expand>
<v-expansion-panel-content
v-for="item in this.items"
:key="item.key">
<div slot="header">
content
</div>
<slot :items="item.children"></slot>
</v-expansion-panel-content>
</v-expansion-panel>
The v-expansion-panel-content has a prop called value. I need to bind that prop to the slot. Ideally, I'd like to achieve something like this:
<slot :items="item.children" :panelValue="value"></slot>
Any ideas would be greatly appreciated.

I've solved this, but in a less than ideal way.
<v-expansion-panel expand>
<v-expansion-panel-content
v-for="item in this.items"
:key="item.key"
v-model="item.isOpen">
<div slot="header">
content
</div>
<slot :items="item.children" :isVisible="item.isOpen"></slot>
</v-expansion-panel-content>

Vuejs component click event not working

I am using Vuejs - Vuikit components and have the following setup:
<template>
<div class="uk-scope">
<vk-modal :show="isShow" v-if="config">
<vk-modal-close #click="alert('hello!')" large></vk-modal-close>
<vk-notification :messages.sync="messages"></vk-notification>
<app-breadcrumb :current-view="currentView" />
<!-- render the currently active component/page here -->
<component v-bind:is="currentView"/>
</vk-modal>
</div>
</template>
My issue is that, the close modal does not see to fire the #click function.
The parent component, does emit an event, but I would prefer to fire something directly from the close button.
I have tried to use #click.native="someFunction()", but this has not helped!

Hey I've not used vuikit before but from their documents they show this is how to close a modal. I would also remove that v-if="config" as that might be confusing Vue
<template>
<div class="uk-scope">
<vk-modal :show.sync="isShow">
<vk-modal-close #click="isShow = false" large></vk-modal-close>
<vk-notification :messages.sync="messages"></vk-notification>
<app-breadcrumb :current-view="currentView" />
<!-- render the currently active component/page here -->
<component v-bind:is="currentView"/>
</vk-modal>
</div>
</template>

Have you tried using #click.native="someFunction" note that this does not have ().