I am trying to render markdown in my vuetify table. I was able to get it working using v-slot for that particular column but now when I use pagination the column that uses v-slot does not update while the rest do. What am I missing?
<v-data-table
v-model="selected"
:search="search"
:class="className"
:item-key="itemKey"
:headers="headers"
:items="items"
>
<template v-slot:item.description="{ item }">
<vue-markdown>{{ item.description }}</vue-markdown>
</template>
</v-data-table>
This is the markdown library: https://www.npmjs.com/package/vue-markdown-v2
edit: Just tested the v-slot without the markdown component and it works as expected.
Related
I'm trying to recreate the following example from Vue-multiselect document in Vue 3 but I can't seem to make it work.
<multiselect
v-model="value"
:options="options"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
placeholder="Pick some"
label="name"
track-by="name"
:preselect-first="true">
<template slot="selection" slot-scope="{ values, search, isOpen }">
<span
class="multiselect__single"
v-if="values.length"
v-show="!isOpen">
{{ values.length }} options selected
</span>
</template>
</multiselect>`
The documentation states that "Documentation for v3.0.0 is the same as for v2.x as it is mostly backward compatible." As there's no specific examples or notes about using slots in Vue 3 I thought that if I changed the component name from 'multiselect' to 'VueMultiselect' it would work but it's not.
The select part is working just fine but when I close the dropdown the custom template doesn't show. It's just the normal tags.
Am I missing something or is the feature not fully migrated to Vue 3?
VueMultiselect's documentation concerning named slots is out of date when it comes to Vue 3 syntax. slot and slot-scope attributes were deprecated in Vue 2.6 (but will continue to be supported in Vue 2.x going forward), and have been completely removed in Vue 3. Your slot in Vue 3 should be written like so:
<template v-slot:selection="{ values, search, isOpen }">
or short-hand:
<template #selection="{ values, search, isOpen }">
Documentation with more information: Named Scoped Slots in Vue 3
I have customized the v-data-table header with text-field for searching to make the function compact. But I can not prevent the sort click function on text-field.
Step to Reproduce:
<div id="app">
<v-app>
<v-main>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:header.calories="{ header }">
<v-text-field label="search calories"></v-text-field>
</template>
</v-data-table>
</v-main>
</v-app>
</div>
Please click this Codepen link
Please click on search calories one to two times, it sorts asc or desc.
I want to stop the sort function only on the header text or custom text-field, because there is a sort icon right side of it.
Put a #click.stop on the v-text-field:
<template v-slot:header.calories="{ header }">
<v-text-field label="search calories" #click.stop />
</template>
This will stop the click event from propagating into the header.
I am new to vue js, i was given an project example to study, i want to ask what <template #['item.amtv_start_sales_date'] = "{item}'> actually do inside . Any help is appreciated thanks
<v-data-table :headers="headers" :items="data" :search="search">
<template #[`item.amtv_start_sales_date`]="{ item }">
<div
:class="
checkDateActiveColorSales(
item.amtv_start_sales_date,
item.amtv_end_sales_date
)
"
#click="click(item.amtv_start_sales_date)"
style="font-weight: 500"
>
{{ item.amtv_start_sales_date }}
</div>
</v-data-table>
According to official docs
v-slot has a dedicated shorthand #, so <template v-slot:header> can be shortened to just <template #header>. Think of it as "render this template fragment in the child component's 'header' slot"
So <template #[`item.amtv_start_sales_date`]="{ item }"> is originally written as <template v-slot[`item.amtv_start_sales_date`]="{ item }">
I already have a v-data-table of vuetify and i want to convert its contents from a data table to a drop down using v-select. How is it possible to do the change?
<v-data-table
dense
v-if="requester_details.credential_type == 'TEMPLATE'"
class="elevation-0"
hide-default-footer
:headers="templateResultHeaders"
#click:row="handleRowClickTemplate"
:items="GetAllTemplatesList"
:no-data-text="noDataText"
>
<template v-slot:[`item.template_name`]="{ item }">
<div>{{ item.template_name }}</div>
</template>
<template v-slot:[`item.Action`]="{}">
<v-icon color="primary">mdi-chevron-right</v-icon>
</template>
</v-data-table>
Well did this and it works as expected. Writing "return object" is important to open the content of the v-select fields
<v-select
v-if="requester_details.credential_type == 'TEMPLATE'"
class="FontSize field_height field_label_size"
dense
placeholder="Template items"
outlined
:items="GetAllTemplatesList"
item-text="template_name"
#change="handleRowClickTemplate"
return-object
>
</v-select>
I have a parent component and a child component (which has a vuetify table).
I am trying to make certain columns display chips from the parent component. I've run into a weird problem which I'm not sure what is the matter.
Parent Page: (Parent page is more complicated than this which is why I have taken out the table into another component so I can reuse it in combination with other stuff elsewhere)
<simple-table
v-if="!loading"
:tableData="tableData"
:loading="loading"
:headers="headers"
#search=""
:selected.sync="selected"
itemKey="groupName"
>
<template v-slot:userDatasetAccess="">
<v-chip color="red" dark>test</v-chip>
</template>
</simple-table>
When the code is like above, I can see test in a chip appearing in the UserDatasetAccessColumn
Child Page
<v-data-table
:headers="headers"
:items="tableData"
:search="search"
:loading="loading"
loading-text="Loading... Please Wait"
show-select
:item-key="itemKey"
v-model="selected"
#input="$emit('update:selected',selected)"
>
<template v-slot:[getSlot(slot)]="{ item }" v-for="(_, slot) in $slots">
<slot :item="item" :name="slot"></slot>
</template>
</v-data-table>
methods: {
getSlot(slot) {
return `item.${slot}`
}
},
However, when I change the parent to:
<template v-slot:userDatasetAccess="item">
<v-chip color="red" dark>{{item.userDatasetAccess}}</v-chip>
</template>
It no longer works.
I've console logged this.$slots and this.$scopedslots and they become empty.
So my question is: Why is it that when I do v-slot:userDatasetAccess="" vs v-slot:userDatasetAccess="item", it no longer appears as part of $slots and $scopedslots.
Is there a better way to access the columns via slots from the parent?