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>
Related
Good morning,
I know that
<v-data-table
:headers="headersfav"
:items="itemsfav"
#click:row="showSaleslead"
>
can start an action when the row is clicked. Is there also the possibility to limit it to one cell?
You will have to use the relevant cell slot:
<v-data-table
:headers="headersfav"
:items="itemsfav"
#click:row="showSaleslead"
>
<template slot="items.cellName" slot-scope="{item}">
<div #click.stop="onSingleCellClick">{{ item.value }}</div>
</template>
</v-data-table>
There's no event to do that here, but you could achieve that using item slot :
<v-data-table :headers="headersfav" :items="itemsfav">
<template v-slot:item.saleslead="{ item }">
<span #click.stop="showSaleslead">{{ item.saleslead}}</span>
</template>
</v-data-table>
I am wondering how I can attach links to items within a Vuetify autocomplete. I would like to do this so that it would act as a search bar. As of right now, I can attach links to the v-list-item but the link won't cover the entire width of the container. It appears to just form a link around the text instead of the entire item. I've tried to wrap the entire component but that doesn't seem to work either. I've also tried looking at the docs (https://vuetifyjs.com/en/components/autocompletes/) but I can't seem to find anything on making items links there either. Thanks for any help in advance.
<v-autocomplete
v-model="model"
:items="users"
:loading="isLoading"
:search-input.sync="search"
clearable
hide-details
hide-selected
item-text="username"
item-value="symbol"
placeholder="Search"
flat
solo
dense
>
<template v-slot:item="{ item }">
<v-list>
<v-list-item-group v-model="item">
<v-list-item-content>
<v-list-item link :to="'users/' + item.id">
{{item.username}}
</v-list-item>
</v-list-item-content>
</v-list-item-group>
</v-list>
</template>
</v-autocomplete>
The item slot should be <v-list-item/> only since the wrapping element of those item slots are <v-list/> already by default.
<v-autocomplete
...
>
<template v-slot:item="{ item }">
<v-list-item link :to="'users/' + item.id">{{item.username}}</v-list-item>
</template>
</v-autocomplete>
Here's a demo.
I am trying to add a router link for each element in this autocomplete component, but the links are not being added. How do I make the items in the list clickable corresponding to a URL with their id ?
I want the value of item-value to be a router link as below:
<router-link :to="'employee/'+ item.ID">{{item.ID}}</router-link>
here is the autocompelete
<v-autocomplete
:items="employees"
item-text="ID"
item-value="ID"
data-vv-name="search"
append-icon="mdi-magnify"
placeholder="Search for an employee"
outlined
id="search"
>
</v-autocomplete>
is changing the value the right approach to do this?
You can add the slot item to modify the item in the list.
Try this:
<v-select
:items="employees"
item-text="ID"
item-value="ID"
data-vv-name="search"
append-icon="mdi-magnify"
placeholder="Search for an employee"
outlined
id="search"
>
<template v-slot:item={item}>
<router-link :to="'employee/'+ item.ID">{{item.Name}}</router-link>
</template>
</v-select>
I have made a v-autocomplete but it highlights words/chars in the list that the user haven't typed.
the v-autocomplete code:
<v-autocomplete
:filter="() => true"
item-text="states.text"
:items="states"
filled
rounded
v-model="model"
:search-input.sync="search">
<template
slot="item"
slot-scope="{ parent,item }"
>
<v-list-tile-content >
<v-list-tile-title v-html="`${parent.genFilteredText(item.text)}`">
</v-list-tile-title>
</v-list-tile-content>
</template>
</v-autocomplete>
You can se it all in the codepen: https://codepen.io/maikenmadsen92/pen/ZEEZjYM?editors=1010
Is it possible just to highlight the words the user have typed in the input?
There are some issue with the implementation of you v-autocomplete.
You filter is useless since it will alway return true with is why all words/chars is highlights.
And the main issue is you item-text since following the doc vuetify
item-text :
Set property of items's text value
With mean you item-text=text since the items is already set to states.
<v-autocomplete
item-text="text"
:items="states"
filled
rounded
v-model="model"
:search-input.sync="search">
<template
slot="item"
slot-scope="{ parent,item }"
>
<v-list-tile-content >
<v-list-tile-title v-html="`${parent.genFilteredText(item.text)}`">
</v-list-tile-title>
</v-list-tile-content>
</template>
</v-autocomplete>
i am able to use getMaskedCharacters to do the trick
How would one keep the default highlighting of characters ones you replace the scoped-slot of the item.
https://vuetifyjs.com/en/components/autocompletes#scopedSlots
Default , will output a v-list where every character from the input is "higlighted" in the output.
<v-autocomplete
v-model="model"
:items="items"
:loading="isLoading"
:search-input.sync="SomeApiDataCall"
item-text="name"
item-value="id"
>
</v-autocomplete>
Custom scoped-slot : I want to change the design of the list , but would like to keep the "highlighted" output
<v-autocomplete
v-model="model"
:items="items"
:loading="isLoading"
:search-input.sync="SomeApiDataCall"
item-text="name"
item-value="id"
>
<template slot="item"
slot-scope="{ item, tile }"
>
<v-list-tile-content >
<!--the html output needs to be highlighted-->
<v-list-tile-title v-html="item.name"></v-list-tile-title>
</v-list-tile-content>
</template>
</v-autocomplete>
VAutocomplete imports > VSelect, imports > VSelectList
VSelectList has a function called genFilteredText
https://github.com/vuetifyjs/vuetify/blob/dev/src/components/VSelect/VSelectList.js#L112
That will do what I want. How would one implement this in the custom scoped-slot ?
Thanks.
The slot-scope Item can also receive the "parent".
After that you can access any methods on it.
<template
slot="item"
slot-scope="{ parent, item, tile }"
>
<v-list-tile-content>
<!-- Highlight output item.name -->
<v-list-tile-title
v-html="parent.genFilteredText(item.name)"
>
</v-list-tile-title>
</v-list-tile-content>
</template>
I am quite new to vue and it took me a while to translate this question/solution into the new Slots syntax.
For anyone that is also using the new v-slot:item="data" syntax, you can receive the parent as follows:
<template v-slot:item="{ parent, item }">
<v-list-tile-content >
<!--Highlight output item.name-->
<v-list-tile-title
v-html="`${parent.genFilteredText(item.name)}`"
></v-list-tile-title>
</v-list-tile-content>
</template>