I'm losing the text highlighting when using the slots
https://codepen.io/dhika345/pen/vYZEXNo
I've used parent.genFilteredText(item.title) but doesn't solve it. I don't know what it is actually
You can comment the item and selection slots and click the v-autocomplete box to see the difference
you have to omitted hide-selected in v-autocomplete tag and after that, you need to use the below code inside v-autocomplete tag.
code:
<template
slot="item"
slot-scope="{ parent, item, tile }"
>
<v-list-tile-content>
<v-list-tile-title
v-html="parent.genFilteredText(item.title)"
>
</v-list-tile-title>
</v-list-tile-content>
</template>
Related
I have creating a list of users want to add them tags. I am using a data-table to display them and a combo box using chips to add or remove tags. How can I pass the user information to the method called when I add / remove a tag? Here is my code:
<v-data-table :headers="headers" :items="usersInfos" :search="search" :items-per-page="-1">
<template v-slot:[`item.tags`]="{ item }">
<v-combobox v-model="item.tags" :items="roles" chips clearable label="Rôles" multiple>
<template v-slot:selection="{ attrs, item, select, selected }">
<v-chip
v-bind="attrs"
:input-value="selected"
close
#click="select"
#click:close="removeRole(item)"
>
{{ item }} <!-- the tag -->
</v-chip>
</template>
</v-combobox>
</template>
</v-data-table>
Don't know if I understood it correctly but you can do following pass your item with your click event to your methods - call the function and use the passed parameter there.
in your template
#click=getSelectedItem(usersInfos)
in your script
methods: {
getSelectedItem(usersInfos) {
//do code here
console.log(usersInfos)
}
}
and than you have to use this where you have written your child element:
<child :usersInfo="usersInfo">
and in your child.vue you have to set props in your script like this:
props: ["usersInfo"]
I am trying to select multiple items in my Vuetify v-select component, but instead of showing them (in a line or using chips) I would like the text to just say 'selected'. New to Vue so not really sure where to start, but here's my code for the v-select component:
<v-select
v-else-if="isMobile"
class="customizable-dropdown"
:items="getSortedItems"
:label="$t('dropdown.label.all')"
multiple
rounded
single-line
#change="onChange"
>
</v-select>
Just use the selection slot to customize the display of the selected item...
<template v-slot:selection="{ item, index }">
<span class="pr-3">{{ item }}</span>
</template>
Demo
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
I'm using a v-autocomplete with a custom slot to display results:
<v-autocomplete :items=searchResults :loading=loading :search-input.sync="query" hide-no-data label="Entreprise, SIREN..." append-icon="search" v-model="selected" three-line >
<template v-slot:item="{ item }">
<v-list-tile-content>
<v-list-tile-title v-text="item.text"></v-list-tile-title>
<v-list-tile-sub-title v-text="item.value"></v-list-tile-sub-title>
>
<v-list-tile-sub-title> Third line of list item</v-list-tile-sub-title>
</v-list-tile-content>
<CompanyListItem :company=item :loading=false />
</template>
</v-autocomplete>
Unfortunately the resulting list items appear compressed vertically, as seen in this codepen.
Is it possible to add two-line or three-line to the underlying list to be able to have 'taller' list items? Adding those properties to the <v-autocomplete> doesn't work.
Changing the height of list tile to auto as CSS property worked for me .
.v-autocomplete__content .v-list__tile{
height: auto;
}
two-line or three-line are props of <v-list></v-list> to increase list-tile height.But here the contents of v-slot:item are by default wrapped in <v-list></v-list> (when i inspect the element in browser inspector).