javascript - 在更改 isFocused 时验证停止光标移动

Question

创建了一个代码笔，当用户在第一个 v-autocomplete 中输入文本时，会出现第二个 v-autocomplete 的下拉菜单。我通过将 isFocused 更改为 true 来做到这一点。问题是光标移动到下一个 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;
    }
  },
})

图片

标签： javascriptvue.jsvuetify.jsv-autocomplete

Answer 1

好吧，您可以使用一个自动完成和一个选择。

但是你去吧，将此代码设置为search(val)方法。我想这就是你要寻找的。

this.$refs.autocomplete2.$refs.menu.isActive = true;
this.$refs.autocomplete2.blur();

活生生的例子