Vue.js/Vuetify - v-selectでオプションをプリロードするとオートコンプリートの問題が発生する

Question

v-modelを使用してv-selectの選択オプションを設定しているので、画面を開くと既に結果が表示されます。それはv-selectタグでオートコンプリートプロパティを設定するまでうまくいきます。私がそうすると、選択肢は選択されますが、選択肢には表示されません。 オートコンプリート機能に問題はありますか、それともコンポーネントの標準的な動作ですか？

Vue.use(Vuetify); 
 

 
var app = new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
\t \t \t \t 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/ ありがとう。

Answer 1

私はあなたのコードをテストし、vuetifyはあなたの後にクラスを注入し、v-selectでこの行を削除した後で動作します。

class="input-group--focused"

あるいは、代わりに、 'クラス' の 'ID' を使用して別のオプションです。