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>
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 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 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 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
Is there a way to concatenate two fields together in a v-select's item-text field?
I have it working for the drop down list values, but the visible entry doesn't show the two fields.
Problem is here: item-text="'${data.item.name}, ${data.item.group}'"
Code:
`<v-select label="Select" v-bind:items="people" v-model="e11"
item-text="'${data.item.name}, ${data.item.group}'"
item-value="name" max-height="auto" autocomplete >
<template slot="item" slot-scope="data">
<v-list-tile-content>
<v-list-tile-title
v-html="`${data.item.name}, ${data.item.group}`">
</v-list-tile-title>
<v-list-tile-sub-title
v-html="data.item.group">
</v-list-tile-sub-title>
</v-list-tile-content>
</template>
</v-select>`
Pen Example: https://codepen.io/anon/pen/dJveWM?editors=1010
Thank you
You need to define a template not only for the slot item but also for the slot selection when using <v-select>:
<template slot="selection" slot-scope="data">
<v-chip
close
#input="data.parent.selectItem(data.item)"
:selected="data.selected"
class="chip--select-multi"
:key="JSON.stringify(data.item)"
>
<v-avatar>
<img :src="data.item.avatar">
</v-avatar>
{{ data.item.name }}
</v-chip>
</template>
See
https://vuetifyjs.com/components/selects#6-scoped-slots
for reference.
This can also be a much simpler solution like the one you're trying to achieve:
<template slot="selection" slot-scope="data">
{{ data.item.name }}, {{ data.item.group }}
</template>
Also see it in action:
https://codepen.io/anon/pen/PEpaMM?editors=1011
For David Folkner: you can add the :filter="customFilter" property to the autocomplete component and then add in the methods block the customFilter function that achieves the custom search.
For example, if your items list is composed by n item objects with id, function and description properties, you should do this for searching through both function and description properties:
Autocomplete component:
<v-autocomplete v-model="itemSelected" :items="items" required box chips label="Select an Item" item-value="id" item-text="description" :filter="customFilter">
<template slot="selection" slot-scope="data">
<v-chip :selected="data.selected" class="chip--select">
{{data.item.function}} - {{ data.item.description }}
</v-chip>
</template>
<template slot="item" slot-scope="data">
<v-list-tile-content>
<v-list-tile-title v-html="data.item.function +' - '+ data.item.description"></v-list-tile-title>
</v-list-tile-content>
</template>
</v-autocomplete>
methods:
methods: {
customFilter (item, queryText, itemText) {
const textOne = item.function.toLowerCase()
const textTwo = item.description.toLowerCase()
const searchText = queryText.toLowerCase()
return textOne.indexOf(searchText) > -1 || textTwo.indexOf(searchText) > -1
}
}
<v-select
:items="unitTypes"
item-text="value"
item-value="id"
v-model="formData.unit_type"
prepend-icon="mdi-ammunition"
label="Unit Types"
required
:error-messages="errors"
>
<template slot="selection" slot-scope="data">
{{ data.item.value }} {{ data.item.type }}
</template>
<template slot="item" slot-scope="data">
{{ data.item.value }} {{ data.item.type }}
</template>
</v-select>
We are using
"vue-cli-plugin-vuetify": "2.0.5",
"vue-eslint-parser": "^7.10.0",
"vue-template-compiler": "^2.6.11",
And the following worked well for us.
<v-autocomplete v-model="data.alarmInfoId" :items="dbQueryResult" item-value="prop3" :item-text="(row) => {return row.prop1+ ' - ' + row.prop2;}"/>
dbQueryResult is a list of items returned from an API call
prop1, prop2, and prop3 are properties on each row in dbQueryResult
I believe that this will work with v-select as well. Though we use v-autocomplete so that users can type search in larger lists.
use slot="selection"
<template slot="selection" slot-scope="item">
{{ item.name }}-{{ item.group }}
</template>
To know more slot
https://vuetifyjs.com/en/api/v-autocomplete/#slots
item-text can accept a function
:item-text="item => `${item.first_value} ${item.second_value}`"