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

Question

我正在使用 v-model 设置 v-select 的 selected 选项，所以当我打开屏幕时它已经带有结果。在我在 v-select 标记中设置自动完成属性之前，一切正常。当我这样做时，该选项被选中但 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 link: https://jsfiddle.net/vcmiranda/huj9L4bq/ 谢谢。

Answer 1

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

class="input-group--focused"

或者，使用 'id' 代替 'class' 是另一种选择。

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

Vue.js/Vuetify - Autocomplete issue when pre-loading option in a v-select

autocomplete

vue.js

vuejs2

vuetify.js

v-select