I need to render a component with a slot inside a v-for loop like so:
<div v-for="(data,index) in myList" :key="index">
<datepicker v-model="data.thru">
<div slot="beforeCalendarHeader" #click="selectToday" class="today p-2 text-center">
Today
</div>
</datepicker>
</div>
and i get the following error:
[Vue warn]: Duplicate presence of slot "beforeCalendarHeader" found in the same render tree - this will likely cause render errors.
How i can use the componentns slot inside the loop?
Sample:
https://codepen.io/DivDax/pen/ajoWPY
Related
I do have a for loop and inside i want to have a modal for each image
<div class="col pb-3" v-for="(item, index ) in img" :key="index" style="width: 300px;height:auto;">
<img v-b-modal="'modal-'+index" :ref="'image'" #mouseover="mouseOver" #mouseleave="mouseOut" /><br>
<b-modal :id="'modal-'+index" title="BootstrapVue">
<p class="my-4">Hello from modal - {{index}}</p>
<img :ref="'imagex'" />
</b-modal>
<div class="progress pt-2 mt-1" style="width: 100px;margin: 0 auto;">
<div class="progress-bar " :style="[{'width':width[index]+'px'}]" role="progressbar"
aria-valuenow="0" ref="'progress'" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
In methods i am giving src value to each image that has :ref="'image'" and i can actually give a src to them its work fine but, i also want be able to give src value images in modal. Its called :ref="'imagex'" but its undefined.
this.$refs.image[i].src = event.target.result //works
this.$refs.imagex[i].src = event.target.result //undefined
What is the problem an is there anyway to solve it ?
When used on elements/components with v-for, the registered reference will be an Array containing DOM nodes or component instances.
An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet! $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
.
can use it in events and only at mounted function.
https://v2.vuejs.org/v2/api/#ref
In my first example, I have in my component's template:
<div id="hello">hello world</div>
When console.log(this.$refs['hello']) is called in myMethod(), I get undefined in the console.
In my second example, I have:
<div v-for="item in data">
<div :id="'hello-'+item.id">hello {{ item.id }}</div>
</div>
When console.log(this.$refs['hello-1']) is called in myMethod(), I also get undefined in the console.
What's wrong in my code ?
You cannot get element with refs by giving that element id. You should bind ref to that element. Here is an example:
<div v-for="item in data" :key="item.id">
<div :id="'hello-'+item.id" :ref="'hello-'+item.id">hello {{ item.id }}</div>
</div>
And also don't forget to bind key to your iterating elements with v-for
I'm using element ui's collapse along with vuedraggable.
And I'm trying to implement vue transition-group to the collapsible items. The vuedraggable documentation says that you can simply do it this way:
<draggable v-model="myArray">
<transition-group>
<div v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>
In my case, I'm putting the draggable items in an "el-menu" component. This is why I'm getting an error:
"Error: Transition-group inside component is not supported"
This is what I got so far:
<draggable element="el-menu" :list="branch.list" :component-data="getComponentData()">
<transition-group>
<el-menu-item
v-for="(list, list_key) in branch.list"
:index="list_key+ '_list'"
:key="leaf_key + '_list'">
content
</el-menu-item>
</transition-group>
</draggable>
I have a vue component with a structure like this:
<transition name="fade">
<div>
<div v-if="false">
</div>
<div v-else="">
<div>
<div>
<div>no matter what content</div>
</div>
<div>
</div>
</div>
</transition>
it works fine until i add a 4th div inside, even without content as it will throw:
DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
If I remove the transition tag... it no longer throws the error
so I'm just curious... is there a limit in allowed depth for vue?
No. There's no limit. You can nest any number divs. But I saw your v-else condition and that might be the issue.
Replace this:
<div v-else="">
With this:
<div v-else>
I have a responsive-menu component which I want to use named slots inside of this up my template markup:
<template>
<div class="responsive-menu">
<div class="menu-header">
<slot name="header"></slot>
</div>
</div>
</template>
Whenever I try my named slot like this it work perfectly fine:
<responsive-menu>
<h3 slot="header">Responsive menu header</h3>
</responsive-menu>
However as soon as I wrap it with a class nothing shows up anymore.
<responsive-menu>
<div class="container">
<h3 slot="header">Responsive menu header</h3>
</div>
</responsive-menu>
What is going on here? Shouldn't I just be able to wrap the named component? Which does it appear that my named slots need to be direct children of my Vue component?
It does not work because your "wrapped slot" isn't direct child of responsive-menu tag.
try something like that:
<responsive-menu>
<div class="container" slot="header">
<h3>Responsive menu header</h3>
</div>
</responsive-menu>
jsfiddle
It works with Vue >= 2.6. Just upgrade vue and vue-template-compiler.