I am trying to do something with v-autocomplete where the default position for v-autocomplete is on the right side of the field, where I want the field to have icon on the left side before the selected content.
I have tried using prepend-icon slot but that isn't working as intended.
here is sample code
<v-autocomplete
ref="city"
v-model="city"
:loading="showCitiesLoading"
:disabled="showCitiesLoading"
dense
outlined
clearable
:rules="[requiredRule]"
color="black"
item-text="name"
item-value="name"
item-color="black"
:items="citiesList"
append-icon=""
#click="isOpen = !isOpen"
>
<template #prepend-inner>
<v-icon #click="isOpen = !isOpen">{{ isOpen ? mdiMenuDown : mdiMenuUp }}</v-icon>
</template>
</v-autocomplete>
and also in above section I have made isOpen to false on default inside Data property.
Thank You
Try to use the prepend-item slot. And remove your append-icon property too.
<v-autocomplete
ref="city"
v-model="city"
:loading="showCitiesLoading"
:disabled="showCitiesLoading"
dense
outlined
clearable
:rules="[requiredRule]"
color="black"
item-text="name"
item-value="name"
item-color="black"
:items="citiesList"
#click="isOpen = !isOpen"
>
<template #prepend-item>
<v-icon #click="isOpen = !isOpen">{{ isOpen ? mdiMenuDown : mdiMenuUp }}</v-icon>
</template>
</v-autocomplete>
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 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'm working on a CMS project and I have an issue I can't figure out.
I Have a component where I'm showing IP's. On change I want a badge to appear, so the user knows "this field is changed".
But the thing is the badge won't show if I'm using "v-slot:badge".
In the v-if is a computed property, If I inspect the page with vue devtools ‘isStartIpValueChanged’ will be true on a change. So, it should work right?
Template
<v-list-item-content>
<v-form ref="form" v-model="valid">
<v-hover v-slot:default="{ hover }">
<v-row align-content="center" no-gutters>
<v-col>
<v-badge overlap color="red" right>
<template v-slot:badge v-if="isStartIpValueChanged">
<v-avatar color="red" size="6"></v-avatar>
</template>
<v-text-field
dense
:rules="apiIpRules"
v-model="apiIp.startIp"
#input="valueChanged()"
ref="startIp"
:class="hover ? 'hover-text-color' : ''"
placeholder="###.###.###.###">
</v-text-field>
</v-badge>
</v-col>
<v-col cols="1" class="text-center" align-self="center">
<p>-</p>
</v-col>
<v-col cols="1" class="text-center" align-self="center">
<v-btn v-show="hover" #click="deleteIp()" icon small color="red"><v-icon>mdi-minus-circle</v-icon></v-btn>
</v-col>
</v-row>
</v-hover>
</v-form>
Created and Computed (apiIp is a prop I get from the parent component)
created () {
this.apiIpsOriginalValueStartIp = this.apiIp.startIp
this.apiIpsOriginalValueEndIp = this.apiIp.endIp
this.apiIp.uuid = this.GenerateUUID()
},
computed: {
isStartIpValueChanged () {
return this.apiIp &&
(this.apiIp.startIp !== this.apiIpsOriginalValueStartIp ||
this.apiIp.uuid === null)
},
isEndIpValueChanged () {
return this.apiIp &&
(this.apiIp.endIp !== this.apiIpsOriginalValueEndIp ||
this.apiIp.uuid === null)
}
},
Anyone know what is going wrong here?
As according to Vuetify's own documentation, you should be using the v-model, directly on the v-badge, to show it only when you want it to.
<v-badge overlap color="red" right v-model="isStartIpValueChanged">
<template v-slot:badge>
<v-avatar color="red" size="6"></v-avatar>
</template>
<v-text-field
dense
:rules="apiIpRules"
v-model="apiIp.startIp"
#input="valueChanged()"
ref="startIp"
:class="hover ? 'hover-text-color' : ''"
placeholder="###.###.###.###">
</v-text-field>
</v-badge>
Doc: https://vuetifyjs.com/en/components/badges#show-on-hover
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>