vuetify 3 v-自动完成选择焦点上的所有文本

Question

当用户点击或选择组件时，我尝试选择

v-autocomplete

vuetify 3 组件上的所有文本，以便他们可以立即开始编辑值，但我在使用如下代码执行此操作时遇到问题：

<v-autocomplete
    label="Customer"
    @focus="OnCustomerFocus"
></v-autocomplete>

methods: {
    OnCustomerFocus(event: any) {
      console.log('customer focused');
      console.log(event);
      event.target.select();
    },
  }

这是我试图完成但没有成功的沙盒版本：

https://stackblitz.com/edit/cwerner-vuetify-3-v-autocomplete-select?file=src%2Fcomponents%2FShipment.vue

这似乎曾经是

v-autocomplete

的默认行为，但根据这篇 github 文章，它一度被删除：

https://github.com/vuetifyjs/vuetify/discussions/13562

Answer 1

Vuetify 仅在编辑过程中显示底层输入。当焦点事件被触发时，输入仍然是隐藏的，调用

.select()

不起作用。您必须等到输入可见

nextTick()

:

async onCustomerFocus(event: any) {
  await nextTick()
  event.target.select();
}

这是在游乐场