如何动态设置 v-select 值？答案

【问题标题】：How to set v-select value dynamically?如何动态设置 v-select 值？
【发布时间】：2023-03-09 11:30:01
【问题描述】：

我的 Vuetify v-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 属性的值，例如“葡萄牙”。

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

【问题讨论】：

你试过v-bind:item-value="fetchedLocale"吗？
@Bert：是的，但没有成功。显示默认值。

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

As per the documentation，item-value 属性定义了用作每个项目的值的属性名称。该属性的默认值为'value'，这意味着每个项目的value 属性将默认用作每个项目的值。例如，如果将其设置为text，则每个languages 的text 属性将用作该项目的值。但是，这实际上不会设置选择组件的值。

您已经通过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/vuetify@0.15.7/dist/vuetify.js"></script>
<link href="https://unpkg.com/vuetify@0.15.7/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>

【讨论】：