Here's my v-autocomplete component.
<v-autocomplete
v-model="selectedPlace"
:items="locationList"
:search-input.sync="query"
color="#e1b753"
clearable
item-text="title"
item-value="id"
label="Address"
return-object
required
close-on-content-click
class="pt-3 pb-0"
item-width="200"
:filter="v => v"
#change="setPlace()"
#blur="setPlace()"
>
<template v-slot:item="data">
<template>
<v-list-item-content>
<v-list-item-title v-html="data.item.title" />
</v-list-item-content>
</template>
</template>
</v-autocomplete>
When it's empty and the user first sets their address it works just fine but if they reload the page the autocomplete field is empty. I want to set its value according to user's information I get from the server but I can't figure out how.
What I've tried so far:
Set locationList[0] to the item I need and used auto-select-fist on autocomplete. It shows the needed location in the dropdown but doesn't display the value in the input.
Same as first but also set v-model to "locationList[0]". It displays the value in the input but doesn't let me change or clear it. When I select and remove the text it just jumps back in.
I guess auto-select-first should do the job, but it doesn't, am I trying to use it wrong?
Related
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>
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 using v-autocomplete with autofocus.
<v-autocomplete
autofocus
solo
rounded
prepend-inner-icon="mdi-magnify"
#keyup.enter="showFilteredItems"
id="searchInput"
:items="stocks"
item-text="symbol"
item-value="name"
:filter="customFilter"
ref="autocomplete">
<template v-slot:item="data">
<v-btn block depressed :to="`/stock/${data.item.symbol}/`">
<v-list-item-title v-html="data.item.symbol"></v-list-item-title>
<v-list-item-subtitle v-html="data.item.name"></v-list-item-subtitle>
</v-btn>
</template>
</v-autocomplete>
the autocomplete work correctly when user click on it and then type the input:
but when user type the input without clicking on v-autocomplete, v-menu does not appear :
however relative events emitted as expected and items are filtered.
surprisingly i tried the same code in vue (not nuxt) and it works properly!
I think you can use :
:input-attrs="{'autofocus':true}"
like question below:
https://github.com/paliari/v-autocomplete/issues/27
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).
I'm having an issue getting the checkboxes to work correctly. The checkboxes that are being rendered for each row in the "selected" slot are not binding to the correct row. When you click the checkbox, it sets the top rows' checkbox to true/false position.
Questions:
1) How to bind the true/false state of the checkbox for the row to it's row item? I'm trying to bind it to data.item.selected and then loop through the data to find the "selected" objects and perform the necessary action. I even tried adding the row object to a new data array, but it only adds the top row?
2) What would be the best way to turn all of the row checkbox's true/false based on the HEAD_selected slot checkbox?
Code:
<b-table
striped
hover
outlined
:items="schools"
:fields="fields"
:per-page="perPage"
:current-page="currentPage"
:total-rows="totalRows"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc">
<template slot="HEAD_selected" slot-scope="data">
<b-form-checkbox #click.native.stop v-model="allSelected">
</b-form-checkbox>
</template>
//Not working. data.item.selected is always the top row in all of the results, not it's current position
<template slot="selected" slot-scope="data">
<b-form-checkbox id="checkbox" #click.stop v-model="data.item.selected">
</b-form-checkbox>
</template>
</b-table>
Answer:
The issue was the id in the b-form-checkbox. id="checkbox" was binding to the same checkbox. Once I changed it to :id="'checkbox'+data.index" it worked!