[英]Veutify stopping cursor to move when changing isFocused
創建了一個代碼筆,當用戶在第一個 v-autocomplete 中輸入文本時,會出現第二個 v-autocomplete 的下拉菜單。 我通過將 isFocused 更改為 true 來做到這一點。 問題是 cursor 移動到下一個 v-autocomplete。 有沒有辦法停止這種或其他方式來顯示第二個 v-autocomplete 的下拉菜單?
這是我的代碼筆https://codepen.io/aaronk488/pen/MWbKNOq?editors=1010
HTML
<div id="app">
<v-app>
<v-container >
<v-row >
<v-col cols="4" md="4">
<v-autocomplete
ref="autocomplete"
label="Autocomplete"
:items="components"
:search-input.sync="search"
hint="need to open menu on focus, just like click" persistent-hint
></v-autocomplete>
</v-col>
<v-col cols="4" md="4">
<v-autocomplete
ref="autocomplete2"
label="Autocomplete2"
:items="components2"
hint="need to open menu on focus, just like click this" persistent-hint
></v-autocomplete>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
JS
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: {
search: null,
components: [
'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields',
],
components2: [
'Autocompletes2', 'Comboboxes2', 'Forms2', 'Inputs2', 'Overflow Buttons2', 'Selects2', 'Selection Controls2', 'Sliders2', 'Textareas2', 'Text Fields2',
],
},
watch: {
search(){
this.$refs.autocomplete2.isMenuActive = true;
this.$refs.autocomplete2.isFocused = true;
}
},
})
好吧,您可以使用一個自動完成功能和一個 select。
但是你有 go,將此代碼設置為search(val)
方法。 我想這就是你要尋找的。
this.$refs.autocomplete2.$refs.menu.isActive = true;
this.$refs.autocomplete2.blur();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.