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
Related
I'm working with Vue.js 2 and Vuetify 2.2.28 (I've already tried to upgrade in Vuetify 2.6 but I have the same issue), I'm trying to apply the "attach" property to the v-menu of a v-date-picker, to keep the calendar attach to his input when I scroll the dialog.
The attach property works on my datepickers outside the dialog, and it also work on my v-select inside the dialog, but I don't understand why it doesn't work with my datepickers inside the dialog :
<v-col md="8">
<v-menu
ref="menuDateEnd"
v-model="addEndDateTrigger"
:close-on-content-click="false"
transition="scale-transition"
max-width="290"
attach
>
<template v-slot:activator="{ on }">
<v-text-field
:value="addUserForm.endDate | date"
label="Date de fin"
readonly
color="ilgprimary"
v-on="on"
hide-details
clearable
#click:clear="clearAddDateEnd"
/>
</template>
<v-date-picker v-model="addUserForm.endDate" scrollable locale="fr" color="ilgprimary" header-color="ilgsecondary" #change="checkEndDate()">
</v-date-picker>
</v-menu>
</v-col>
I've also tried to put an ID to my v-col and attach the datepicker to it doing attach="#my-col-id" but it doesn't work too.
Someone know how to fix this please ?
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?
I have a text field built right into a vuetify expansion panel.
After clicking the "rename box" icon
The issue is that every time I type a spacebar into the text box the expansion panel toggles. I have prevented the event propagation of a click by using click.stop="" attribute but I cant seem to prevent this space bar event from affecting the parent.
Attributes that I have tested are:
keydown.stop
keydown.prevent ('Cant type with this option')
keydown.self
keydown.capture
input.stop
change.stop
The following are the events emitted according to the vue plugin
Here is the code
<v-expansion-panel
active
v-for="(item, i) in $store.state.data"
:key="i"
>
<v-expansion-panel-header>
<div v-if="editorQ !== i">Q. {{ item.q }}</div>
<v-text-field
v-else
label="Question"
:value="newQuestion"
#click.stop=""
#change.stop="updateQ"
#keydown.stop=""
></v-text-field>
<template v-slot:actions>
<v-btn
v-if="editorQ === i"
#click.stop="doneEditingQuestion(i)"
depressed
icon
text
>
<v-icon> mdi-check </v-icon>
</v-btn>
<v-btn
class="upright"
v-else
#click.stop="editQuestion(i)"
depressed
icon
text
>
<v-icon> mdi-rename-box </v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
It was just trial and error for me, the following prevents the active toggle:
#click.stop
#keyup.prevent
when applied to the v-text-field within a v-expansion-panel-header.
Codepen
I have a menu dialog inside a table column to update a corresponding value.
The menu dialog when opened shows a card with a select box and update button.
The menu is activated using v-on which works exactly as intended but I have no way of closing the menu.
Since it's inside a table, using a v-model and changing the value causes multiple menus/select boxes to be shown to be opened.
<v-menu :close-on-content-click="false" :close-on-click="false">
<template v-slot:activator="{ on: { click } }">
<v-chip #click="click" small>{{item[header.value]}}</v-chip>
</template>
<v-card>
<!-- <v-card-title class="subtitle-2 pb-0 pt-1">Update Status</v-card-title> -->
<v-select items="Status" class="px-4 pb-2" hide-details label="Status"></v-select>
<v-card-actions>
<!-- <v-spacer></v-spacer> -->
<v-btn color="primary" #click="" text>Update</v-btn>
<v-btn color="warning" text>Cancel</v-btn>
</v-card-actions>
</v-card>
</v-menu>
How can I close the menu without using a v-model?
It was an easy solution...
I added a v-model to the menu dialog and created an object in data display: {}. The v-model on the menu dialog was v-model="display[item.id]" using the item id as an index of sorts and then I could just use a method to close it.
close(id) {
this.display[id] = false;
},
Done.
Vuetify autocomplete by default have custom "up" and "down" arrow icons:
How can be changed this icon to search icon in other events (active or inactive) and get this view:
This example created using v-text-field:
Code:
<v-text-field
flat
solo
hide-details
append-icon="search"
label="Search..."
color="#000000"
></v-text-field>
I tired append icon to vuetify autocomplete component but can't remove default up and down rows.
Code:
<v-autocomplete
v-model="select"
:append-outer-icon="search ? 'search' : 'search'"
label="Search..."
type="text"
:loading="loading"
:items="items"
:search-input.sync="search"
cache-items
class=""
flat
hide-no-data
hide-details
#click:append-outer="startSearch"
></v-autocomplete>
Result:
Generaly how I can change arrow icons to search icon and do it as clickable for search?
Use append-icon="" and set it to blank
Here's the example.
If you want to append icon with callback function use append-icon-cb="()"
https://codepen.io/anon/pen/WqXVWj?&editable=true&editors=101
Try this append-icon="mdi-magnify"