I have an array passed as a prop to fill in a v-for loop for a v-menu in vuetify. The menu items need to have #click events assigned and the names of the functions are passed in the array as a string (one example is the "CanResolve" event which you see in the parent component) and then inserted into the v-on:click="item.clickFunctions" for each menu button. I am currently storing the functions in the child component and it is not working but ultimately I would like to store the functions in the parent component and have the #click events call those if possible. The one example is the myButtonEventHandler method stored in the parent component which is suppose to be triggered by the CanResolve event in the child theme. For some reason this event is not even being triggered when dynamically created like this in the v-for and #click.
Child component which has the following menu which needs click events filled from array passed as prop
<v-menu bottom
right>
<template v-slot:activator="{ on, attrs }">
<v-btn light
icon
v-bind="attrs"
v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<template v-for="(item,index) in menus">
<v-list-item v-if="item.isActive" :key="index" link>
<v-list-item-title #click="$emit(item.clickFunction)">{{item.title}}</v-list-item-title>
</v-list-item>
</template>
<v-list-item :href="docxLocation(filedir)" download link>
<v-list-item-title>Download</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
Component implemented in parent component:
<embeddedPDF #CanResolve ="myButtonEventHandler" v-bind:filedir="pdfLocation(item.Draft_Path)" v-bind:canvasid="'draft-canvas-'+item.Round" :menus="menuItemsArray[item.Round-1].menus"></embeddedPDF>
You need to add emit event in the child component and pass whatever you want to send to the parent as the second param.
Then in the parent component, you receive that even and assign to a function.
Child component
`
<div v-for="{ item, idx } in items" :key="item.id">
<button #click="$emit('handleItemClick', idx)">{{ item }}</button>
</div>
`
parent component template
<div>
<ChildComponent #handleItemClick="handleChildItemClick" />
</div>
parent component methods
methods: {
handleChildItemClick(idx) {
console.log(idx);
},
},
Related
I want to reactively call a custom bootstrap popover component based on which svg the user is hovering over throughout the page. It is called by:
<template>
<popover v-if="node != null">
<template #content>
Reached
</template>
<template #caller>
{{node}}
</template>
</popover>
</template>
However, {{node}} is returning "[object SVGGElement]" rather than the expected html object.
If I use {{node.outerHTML}} it returns a string literal: "svg id="test"></svg"
Any suggestions to have it return as an html object? For example:
...
<template #caller>
<svg id="test"></svg>
</template>
...
The Svg is an SVGGElement. I suggest capturing the mouse mouseover event to set the Popover position.
I have a custom component which is being used application wide. But, in some place I want to show tooltip on hover on this component, according to vuetify docs this should work but it doesn't because <custom-component /> is not a native component.
And to have this functionality for native component a .native modifier is to be used.
Example: #click.native="someMethod"
How can I do that to show v-tooltip.
I have tried wrapping <custom-component /> in a div but it isn't working.
Below is sample code to get the gist.
<v-tooltip>
<template v-slot:activator="{ on }">
<custom-component v-on="on" />
</template>
<span>Tooltip text</span>
</v-tooltip>
custom-component should forward events from an element with v-on="$listeners"
https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
I have tried wrapping <custom-component /> in a div but it isn't working
If you do this then the events need to be bound to the div instead:
<div v-on="on">
<custom-component />
</div>
I have a modal that have 2 slots, default slot and buttons slot, in the default slot i will set the content of the modal (in this case i will use an alert) and in buttons slot i will add some buttons (in this case a delete button).
Now i want to create a component that will contain the alert and the delete button mentioned before. but the alert will be in the default slot and the button in the buttons slot of the modal.
If i use the code below in the modal component like this, it will show the modal with the alert
<modal>
<template v-slot:default>
<v-alert type="warning" :value="true">
¿Are you sure you want to delete {{ text }}?
</v-alert>
</template>
<template v-slot:buttons>
<v-btn color="error" #click="clicked">Delete</v-btn>
</template>
</modal>
Now what i want is to be able to just set a component inside the modal like this
<modal :title="title" :show="show" #close="show = false">
<modal-elim :text="'delete something'"></modal-elim>
</modal>
I want to do this, so i can dynamically change the content of the modal in the future, and reuse the same modal layout.
As you can see the modal-elim component will have the alert and the button shown before, but they must apper in the slots of the modal component, i have tried this
<template>
<div>
<template v-slot:default>
<v-alert type="warning" :value="true">
¿Estas seguro que deseas eliminar {{ text }}?
</v-alert>
</template>
<template v-slot:buttons>
<v-btn color="error" #click="clicked">Enviar</v-btn>
</template>
</div>
</template>
<template v-slot> can only appear at the root level inside the receiving the component
When i trie to wrap the elements inside the slot it throw an error
It is posible to add the parent slot iside the child component?
How can i do that?
How else can i do a workaround this?
in the ModalElim component? i have tried this but it throw an error.
How to solve this error when I try to use variable in slot from v-for in Vue.js?
Property or method "slide" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
This is how I use component:
<Slides v-model="slides">
<AnotherComponent v-model="slide.someproperty" />
In Slides component I have v-for:
<div v-for="(slide, index) in value" :key="slide.id">
<comp1 v-model="slide.prop1"></dropper>
<slot></slot>
</div>
This is exactly what scoped slots are for.
For example, in your Slides template
<slot :slide="slide"></slot>
and in the parent...
<Slides v-model="slides">
<AnotherComponent slot-scope="{ slide }" v-model="slide.someproperty"/>
Note: If using Vue < 2.5, you can only use slot-scope on a <template> element.
Let's say I'm developing an enhanced popper.js for Vue and I'm about to give it some additional functionality. This is how the very (child) component looks like:
<popper>
<div :is="tag" class="popper">
{{ content }}
</div>
<button class="btn btn-primary" slot="reference">
Reference Element
</button>
</popper>
As you can see, for it to work it requires defining reference element right beneath the ".popper" div with a slot="reference" attribute.
Question:
How to turn my enhanced-popper component into a re-usable entity, aka be able to pass slotted data indirectly - from
<enhanced-popper> //referenced element// </enhanced-popper> so that it has the slot="reference" attribute inside the child (popper.js-based) component?
What did not work:
Employing slots and having the attribute in a component passed in by the parent component does not yield desired results, as it does not get rendered at all.
<popper>
<div :is="tag" class="popper">
{{ content }}
</div>
<slot></slot>
</popper>
To ensure having the attribute out there I also tried to replace said button in the child component with a named slot inside a slot and go like this in my enhanced-popper:
<slot name="reference">
<slot></slot>
</slot>
That way the first slotted component has the attribute - and it almost works, but since there are two "slot-layers" (no idea how to call it), the referenced component is not the first one as a child, and popper gets mis-positioned.
Cheers,
Paco