如何动态设置 v-select 值？

Question

我的 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属性的值，例如“Portugues”。

问题：如何在加载 DOM 元素时更新v-select以便它设置fetchedLocale的值，就像“葡萄牙”之前提到的那样，而不是设置默认的空值？

Answer 1

根据文档，item-value道具定义了属性名称以用作每个项目的值。该道具的默认值是'value'，这意味着默认情况下value每个项目的属性将用作每个项目的值。text例如，如果您将其设置为 ，那么text您每个人的属性languages将用作该项目的值。但是，这实际上不会设置选择组件的值。

您已经将 select 组件的值绑定到setLocalevia v-model。因此，如果您想将 select 组件的值更改为fetchedLocalevalue，只需setLocale使用 的值进行更新，fetchedLocale组件就会更新：

this.setLocale = this.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);
  }
})