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.
Related
I have this v-data-table, witch one shows the result from a request to api, also it allows me to edit them, in the text-field it sets the information correctely, but the problem is it doesn't set the information in the autocomplete select:
<v-data-table
:headers="cabeceras"
:items="tablaRepuestos"
sort-by="Repuesto"
class="elevation-1"
no-results-text="No se encontraron resultados"
no-data-text="No ha cargado Ningun Dato"
>
<template v-slot:[`item.itg_descripcion`]="props">
<v-autocomplete
v-model="props.item.itg_descripcion"
:items="fillModRepuestos.listaRepuestos"
item-value="itg_id"
item-text="itg_descripcion"
label="Repuestos"
height="20"
return-object
#change="cambioRepuesto(props.item.itg_descripcion)"
no-data-text="No hay coincidencias"
clearable
></v-autocomplete>
</template>
<template v-slot:[`item.cantidad`]="props">
<v-text-field
v-model="props.item.cantidad"
label="Cantidad"
clearable
type="number"
></v-text-field>
</template>
<template v-slot:[`item.actions`]="{ item }">
<v-tooltip bottom mg="1">
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
color="red"
small
fab
dark
#click="eliminarRepuesto(item)"
class="ml-2"
>
<v-icon>mdi-delete</v-icon>
</v-btn>
</template>
<span>Eliminar Repuesto</span>
</v-tooltip>
</template>
</v-data-table>
this shows the v-data-table right now:
but it should shows this:
the autocomplete select load the list correctly but the problem, as I said, is they don't load the information from the field itg_descripcion, how can I resolve this problem?
You have configured your v-autocomplete to use itg_id as it's item-value, this means you need to pass the itg_id to it's v-model in order to work properly. But in your code you are passing props.item.itg_descripcion.
If you have the itg_id in your props.item object, you just need to use that instead.
<v-autocomplete
v-model="props.item.itg_id"
:items="fillModRepuestos.listaRepuestos"
item-value="itg_id"
item-text="itg_descripcion"
label="Repuestos"
height="20"
return-object
#change="cambioRepuesto(props.item.itg_descripcion)"
no-data-text="No hay coincidencias"
clearable
></v-autocomplete>
If not, you can configure it to work with itg_descripcion only. But imo using id's it's safer.
<v-autocomplete
v-model="props.item.itg_descripcion"
:items="fillModRepuestos.listaRepuestos"
item-value="itg_descripcion"
item-text="itg_descripcion"
label="Repuestos"
height="20"
return-object
#change="cambioRepuesto(props.item.itg_descripcion)"
no-data-text="No hay coincidencias"
clearable
></v-autocomplete>
I have a v-list and v-list-item-group setup very similar to the one shown here in the Vuetify help:
https://vuetifyjs.com/en/components/lists/#flat
My problem comes if the user clicks on the same v-list-item twice - which then de-selects it without selecting another item.
I've tried mapping the v-model to a computed get(), set() and stopping the set, but this doesn't have any effect.
I really want the selected item to be set programmatically and I control it from an #click event.
Have you tried to use the mandatory property of v-list-item-group? It seems to do something close to what you want - the user cannot de-select an item, but can switch to another one. Something like this:
<v-card class="mx-auto" max-width="300" tile>
<v-list flat>
<v-subheader>REPORTS</v-subheader>
<v-list-item-group v-model="selectedItem" color="primary" mandatory>
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
First when user select one item value of selected Item Group is changed to new value and when double click still item is selected and active.
Something like this:
<v-list-item-group
v-model="selectedItemGroup"
:mandatory="selectedItemGroup!=-1"
>
</v-list-item-group>
<script>
export default {
data:function(){
selectedItemGroup:-1,
}
}
</script>
Inside my v-select menu, I added a template with 2 v-list-items :
<v-select
:items=clients
dense
item-text="full_name"
item-value="id"
label="Search by client"
outlined
v-model="clientSearch"
>
<template v-slot:prepend-item>
<v-list-item
ripple
#click="selectNone()">
<v-list-item-content>
<v-list-item-title>None</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item
ripple
#click="selectAll">
<v-list-item-content>
<v-list-item-title>All</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-select>
Items within the v-select values react with the close-on-click property set by default, but not the the 2 others v-list-item.
How can I add the property close-on-click to the items inside the template so the v-menu closes no mater which item is selected ?
<v-select
.
.
:menu-props="{
closeOnClick: true,
closeOnContentClick: true,
}"
>
</vselect>
"closeOnContentClick: true" make the list as wish you are wish:)
So far I didn't see yet vuetify had this in their docs. What I did on it last time is to just push a new item in your current data and assigned an id just for an indicator. Maybe not the good way but will solve your problem as of now. Like this one
this.clients.push(
{id:0, full_name:'All'},
{id: -1, full_name:'None'}
)
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>