How to move from slot and slot-scope in vue 3. Currently, the update and delete buttons don't work.
//CODE//
**<template slot="cell(action)" slot-scope="data">**
<b-button size="sm" variant="primary" :to="{ name:'editarProductos', params:id_producto: data.item.id} }">
Editar
</b-button>
<b-button size="sm" variant="danger" :to="{ name:'eliminarProductos', params: {id_producto:data.item.id} }">
Eliminar
</b-button>
</template>
See this documentation here: https://vuejs.org/guide/components/slots.html
We no longer need to define slot-scoped. We can define a slot like:-
Normal Defination:
<slot></slot>
Usage:
<Component> slot content </Component>
Named Slots:
<slot name="customSlot"></slot>
Usage:
<Component>
<template #customSlot> Custom Content </template>
</Component>
Related
Given the following "wrapper component" DefaultButton for a Quasar QBtn, I make use of v-bind="$attrs" and a v-for loop for passing down the slots.
DefaultButton.vue
<template>
<q-btn v-bind="$attrs" color="primary" outline rounded>
<template v-for="(_, slot) in $slots" #[slot]="scope">
<slot :name="slot" v-bind="scope || {}" />
</template>
</q-btn>
</template>
<script setup></script>
Now if I'd like to create another wrapper for DefaultButton.vue, is it necessary to repeat inserting v-bind="$attrs" and the slot template?
SomeIconButton.vue
<template>
// Is this sufficient?
<default-btn icon="some-icon"></default-btn>
// Or is this required?
<default-btn v-bind="$attrs" icon="some-icon">
<template v-for="(_, slot) in $slots" #[slot]="scope">
<slot :name="slot" v-bind="scope || {}" />
</template>
</default-btn>
</template>
<script setup />
</script>
Passing a header component as a named slot into router-view. But router-view not exactly displaying it. Normally this was work in vue 2. But it's not with vue 3. Is the way doing it changed or is it impossible to do it now?
header component
<template>
<header id="g-header">
<figure>
<img id="logo"
src="#/assets/images/logo.jpg"
alt="The beautiful MDN logo.">
</figure>
<nav id="g-nav" class="flex justify-space-between">
<a v-for="(link, idx) in links" :key="idx"
class="flex justify-center align-center capitalize"
:href="link.val">{{ link.text }}</a>
</nav>
</header>
</template>
router-view component
<template>
<div id="moduleA" class="modules">
<router-view class="moduleA-children">
<template #header>
<app-header></app-header>
</template>
</router-view>
</div>
</template>
children view component
<template>
<div id="step1">
<slot name="header"></slot>
<div class="row">the named slot OR default slot not showing</div>
</div>
</template>
Is there a way to accomplish this? Or do I missing something here?
In Vue Router 4, <router-view> exposes the component to render as a v-slot prop, named Component, which would be used with the built-in <component> tag. You could pass any slots to the component within that <component> tag:
<router-view v-slot="{ Component }">
<component :is="Component">
<template #header>
<app-header></app-header>
</template>
</component>
</router-view>
demo
I'm using last version of vuetify and trying to figure out how to make slots work. Documentation about select may be find here
VSelectWithValidation
<v-select v-model="innerValue" :error-messages="errors" v-bind="$attrs" v-on="$listeners">
<template slot="selection" slot-scope="data">
{{ data.item.name }}
</template>
<template slot="item" slot-scope="data">
{{ data.item.name }} - {{ data.item.description }}
</template>
</v-select>
TestComponent
<VSelectWithValidation
rules="required"
:items="items"
v-model="select"
label="Select">
// I WOULD LIKE SLOTS TO BE AT THIS LEVEL
</VSelectWithValidation>
Basically, I would like the slots to be customized so I need to move them out of the VSelectWithValidation component to be set on the TestComponent
I tried different variations with no success.
https://codesandbox.io/s/veevalidate-components-vuetify-u11fd
VSelectWithValidation
You need to create slot inside your template slot item and bind scope data to able to use from other component ..
<template slot="item" slot-scope="data">
<slot name="item" v-bind="data"></slot>
</template>
TestComponent
You can access that slot by writing v-slot:YourSlotName="hereIsBindData"
<template v-slot:item="data">
{{ data.item.name }} // you can code here whatever you like
</template>
I am trying to create a wrapper component around an existing component (q-table from the quasar-framework).
<!-- MyTable.vue -->
<template>
<q-table :title="title" ...>
<template v-slot:top="props">
...
</template>
<template v-slot:body="props">
<q-tr :props="props">
...
</q-tr>
</template>
</q-table>
</template>
<template v-slot:body="props"> and <template v-slot:top="props"> are slots of the q-table component.
How to overwrite these slots in the App.vue:
<!-- App.vue -->
<template>
<div>
<my-table>
???
</my-table>
</div>
</template>
Lets say, I have the following vuejs structure:
<!-- MainComponent.vue -->
<template>
<childcomponent></childcomponent>
</template>
<!-- ChildComponent.vue -->
<template>
<div>
<grandchild></grandchild>
</div>
</template>
<!-- GrandchildComponent.vue -->
<template>
<div>
FooBar
<slot name="actions"></slot>
</div>
</template>
If I want to set a value for the grandchild-slot "actions" in the child-component, I have to do this:
<!-- ChildComponent.vue -->
<template>
<div>
<grandchild>
<template slot="actions">Actions from ChildComponent</template>
</grandchild>
</div>
</template>
But how to bypass "actions" from the MainComponent? I tried this, but thats not working:
<!-- MainComponent.vue -->
<template>
<childcomponent>
<template slot="actions" slot-scope="props">
Actions from MainComponent
</template>
</childcomponent>
</template>
<!-- ChildComponent.vue -->
<template>
<div>
<grandchild>
<slot name="actions">
<template slot="actions" slot-scope="props">
Actions from ChildComponent
</template>
</slot>
</grandchild>
</div>
</template>
After a lot of research, I think the only possible way of doing it, is only over the render function (https://v2.vuejs.org/v2/guide/render-function.html).
The main idea behind it is to write instead of html templates for ChildComponent.vue and GrandchildComponent.vue custom render functions.
A complete tutorial for a similar usecase can be found here:
https://github.com/ratiw/vuetable-2-tutorial/wiki