web-dev-qa-db-ja.com

v-select値を動的に設定する方法は？

私のVuetifyv-select要素は次のようになります。

<v-select
   v-bind:items="languages"
   v-model="setLocale"
   label="Language:"
   auto prepend-icon="map"
   item-value="fetchedLocale"
   hide-details
   id="langSelect"
   >

dataには、次のものがあります。

data () {
  return {
    languages: [
      { shortCode: 'en', text: 'English' },
      { shortCode: 'pl', text: 'Polski' },
      { shortCode: 'es', text: 'Español' },
      { shortCode: 'pt', text: 'Portugues' }
    ],
    fetchedLocale: '',
    setLocale: null
  }
}, (...)

いくつかの処理の後、fetchedLocaleは上記の配列からいくつかのtextプロパティの値を取得します。 「ポルトガル語」。

質問：デフォルトの空の値を設定する代わりに、DOM要素をロードするときに、「ポルトガル語」で前述したようにfetchedLocaleの値を設定するように、v-selectを更新するにはどうすればよいですか？

vue.jsvuejs2vuetify.js
3
AbreQueVoy

ドキュメントによる 、item-value propは、各アイテムの値として使用するプロパティ名を定義します。この小道具のデフォルトは'value'です。これは、各アイテムのvalueプロパティがデフォルトで各アイテムの値として使用されることを意味します。たとえば、これをtextに設定すると、各textのlanguagesプロパティがそのアイテムの値として使用されます。ただし、これは実際にはselectコンポーネントの値を設定しません。

選択コンポーネントの値は、v-modelを介してsetLocaleに既にバインドされています。したがって、選択したコンポーネントの値をfetchedLocale値に変更する場合は、setLocaleをfetchedLocaleの値で更新するだけで、コンポーネントが更新されます。

this.setLocale = this.fetchedLocale

これが実際の例です：

new Vue({
  el: '#app',
  data() {
    return {
      languages: [
        { shortCode: 'en', text: 'English' },
        { shortCode: 'pl', text: 'Polski' },
        { shortCode: 'es', text: 'Español' },
        { shortCode: 'pt', text: 'Portugues' }
      ],
      fetchedLocale: '',
      setLocale: null
    };
  },
  created() {
    setTimeout(() => {
      this.fetchedLocale = 'English';
      this.setLocale = this.fetchedLocale;
    }, 1000);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>
<link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<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-select
      :items="languages"
      v-model="setLocale"    
      label="Language:"
      auto prepend-icon="map"
      item-value="text"
      hide-details
      id="langSelect"
    ></v-select>
  </v-app>
</div>
4
thanksd