0

我有下面的表格供用户使用。这里的问题是，当我在 first_name 字段上并按键盘上的 tab 键时，它会将我带到 last_name 字段。当我在 last_name 字段上按 Tab 键时，它会跳过 city 字段并直接转到 phone_number 字段。我必须单击城市字段才能选择城市。Tab 键不会带我进入 v-select。我正在使用 vuetify 2.3.10 版。我无法解决这个问题。知道如何解决这个问题吗？

<template>
  <div>
    <v-form :model='user'>
      <v-text-field
       label='First Name'
       v-model='user.first_name'>
      </v-text-field>
      <v-text-field
       label='Last Name'
       v-model='user.last_name'>
      </v-text-field>
      <v-select 
       :items="cities"
       attach
       item-text='name'
       item-value='name'
       v-model="user.city"
       label="City">
      </v-select>
      <v-text-field
       label='Phone Number'
       v-model='user.phone_number'>
      </v-text-field>
    </v-form>
  </div>
</template>
4

2 回答 2

1

v-select逻辑上是text输入，打开的列表v-list-item是v-select

<v-select 
  @focus="($event) => {$event.target.click()}"
<v-select

这是代码笔

于 2021-01-28T23:09:30.500 回答
0

我刚刚遇到了这个问题，因为我之前已经遵循了这个问题线程中的建议。通过将 v-select 的输入样式设置为display: none，浏览器不再使用 tab 键关注它。

解决方法是改用以下样式，将输入的宽度设置为 0 而不是完全隐藏它：

.v-select__selections input {
    width: 0 !important;
    max-width: 0 !important;
}
.v-select__selections .v-select__selection {
    max-width: none;
}
于 2021-07-31T15:29:32.147 回答