代码之家 › 专栏 › 技术社区 › AbreQueVoy

如何动态设置v-select值?

vuetify.js vuejs2 vue.js

AbreQueVoy · 技术社区 · 7 年前

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 上面数组中的属性,例如“葡萄牙语”。

问题:如何更新这样就可以 获取的区域设置

1 回复 | 直到 7 年前

thanksd thibaut noah 7 年前

As per the documentation 这个 item-value prop定义要用作每个项的值的属性名称。此道具的默认值为 'value' ,表示 value 默认情况下,每个项目的属性将用作每个项目的值。如果您将其设置为 text ,例如 文本 您每个人的财产 languages 将用作该项的值。但是,这实际上不会设置选择组件的值。

您已经将选择组件的值绑定到 setLocale v-model . 因此,如果要将选择组件的值更改为 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>

推荐文章

Veer3383 · 如何更改/覆盖Vuetify js中禁用字段的默认颜色?

7 年前

Peter Krauss · emit go modal在其他实例中什么都不做,如何调用modal?

7 年前

Yuri F Becker · 在vue中以编程方式创建表单

7 年前

L. Gangemi · Vue+Vuetify扩展面板输入/离开动画

7 年前

niutech · 如何异步验证Vuetify文本字段?

7 年前

Jay Vignesh · VueJs-在方法之间传递变量

7 年前

JustStartedProgramming · 在Vuejs中读取HTML响应以在对话框中显示

7 年前

Raluca · 在滑块中获取居中元素的对象

7 年前

tobiasg · 将new Date()与v-Date-picker一起使用不起作用

7 年前

IsraGab · 动态内容到v-expansion-panel-content

7 年前