Vue.js/Vuetify - 在 v-select 中预加载选项时的自动完成问题

Posted 2023-02-22

【中文标题】Vue.js/Vuetify - 在 v-select 中预加载选项时的自动完成问题

【英文标题】：Vue.js/Vuetify - Autocomplete issue when pre-loading option in a v-select

【发布时间】：2017-12-28 07:17:36

【问题描述】：

我正在使用 v-model 设置 v-select 的选定选项，因此当我打开屏幕时它已经带有结果。在我在 v-select 标记中设置自动完成属性之前，这一切正常。当我这样做时，选择了该选项，但选择不显示它。 自动完成功能是否有任何问题，或者它是组件的标准行为？

Vue.use(Vuetify);

var app = new Vue(
  el: '#app',
  data() 
    return 
				selected: 2,
        country: [
          text: 'USA',
          value: 1
        , 
          text: 'Canada',
          value: 2
        , 
          text: 'England',
          value: 3
        , 
          text: 'France',
          value: 4
        ]
      
    
)

<script src="https://unpkg.com/vue@2.4.1/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
  <v-app>
    <v-card class="grey lighten-4 elevation-0">
      <v-card-text>
        <v-container fluid>
          <v-layout row wrap>
            <v-flex xs4>
              <v-flex>
                <v-subheader>Origin Country</v-subheader>
              </v-flex>
              <v-flex>
                <v-select
                  :items="country"
                  v-model="selected"
                  label="Select"
                  class="input-group--focused"
                  single-line
                  bottom
                  autocomplete>
                </v-select>
              </v-flex>
            </v-flex>
            <v-flex>
              Selected:  selected 
            </v-flex>
          </v-layout>
        </v-container>
      </v-card-text>
    </v-card>
  </v-app>
</div>

这里是 jsfiddle 链接：https://jsfiddle.net/vcmiranda/huj9L4bq/ 谢谢。

【参考方案1】：

我测试了你的代码，vuetify 会在你的代码之后注入它的类，在 v-select 中删除这一行之后，它就可以工作了。

class="input-group--focused"

或者，使用 'id' 而不是 'class' 是另一种选择。

【讨论】：

我还是不能投票，所以在这里谢谢你。它对我有用。