时间戳

首页 > 解决方案 > Vuetify 自动完成同时激活的两个菜单

javascript - Vuetify 自动完成同时激活的两个菜单

问题描述

这是我的代码笔 https://codepen.io/aaronk488/pen/MWbKNOq?editors=1011

这是HTML

<div id="app">
<v-app>
    <v-container >
    <v-row >
        <v-col cols="6" md="6">
        <v-autocomplete
            ref="autocomplete"
            label="Autocomplete"
            :items="components"
            hint="need to open menu on focus, just like click"                     persistent-hint
        ></v-autocomplete>
          </v-col>
          <v-col cols="6" md="6">
            <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: {
        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',
        ],
  },
   mounted () {
      let autocompleteInput = this.$refs.autocomplete.$refs.input
      autocompleteInput.addEventListener('focus', this.onFocus, true)
     let autocompleteInput2 = this.$refs.autocomplete2.$refs.input
      autocompleteInput2.addEventListener('focus', this.onFocus2, true)
    },
  methods: {
    onFocus() {
      this.$refs.autocomplete.isMenuActive = true
      this.$refs.autocomplete.isMenuActive = true
    },
    onFocus2() {
      this.$refs.autocomplete.isMenuActive = true
    }
  }
})

这是 UI 的样子 在此处输入图像描述

有没有办法让两个 v-autocomplete 菜单同时显示？如果用户单击任一 v-autocomplete，则该 v-autocomplete 和其他 v-autocomplete 下拉菜单会同时显示选项。

标签： javascriptvuetify.jsv-autocomplete

解决方案

将 isMenuActive && isFocused 设置为 true

this.$refs.example.isMenuActive = true;
this.$refs.example.isFocused = true;

推荐阅读