如何在Vuetify中不使用v-model通过代码修改v-select选项

问题描述 #

我需要通过代码设置v-select的选项，但无法使用v-model。需求如下：

• 选择v-select中的一个选项
• 点击“Set Select”按钮切换选项
  但目前按钮仅在首次点击时生效，请问哪里操作有误？

现有代码 #

Markup部分

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row align="center">
        <v-col cols="6">
          <v-subheader>
            Custom items
          </v-subheader>
        </v-col>
        <v-btn @click="setSelect()">Set Select</v-btn>
        <v-col cols="6">
          <v-select
            :value="select"
            :items="items"
            item-text="state"
            item-value="abbr"
            label="Select"
            persistent-hint
            single-line
               
          ></v-select>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Script部分

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      select: 'FL' ,
      items: [
        { state: 'Florida', abbr: 'FL' },
        { state: 'Georgia', abbr: 'GA' },
        { state: 'Nebraska', abbr: 'NE' },
        { state: 'California', abbr: 'CA' },
        { state: 'New York', abbr: 'NY' },
      ],
    }
  },
  methods:{
    setSelect(){
      this.select="GA"
    },
    
  }
})

问题原因 #

只用:value绑定初始值，但未监听v-select的change事件同步用户选择后的值到select变量。当用户手动选择选项后，select变量并未更新，此时点击按钮设置this.select="GA"，若当前select值已是GA（或用户选了其他值但变量未同步），Vue响应式系统检测不到变化，导致v-select无法更新。

解决方案 #

1. 同步用户选择的值 #

给v-select添加@change事件，将选中的值同步到select变量：

<v-select
  :value="select"
  :items="items"
  item-text="state"
  item-value="abbr"
  label="Select"
  persistent-hint
  single-line
  @change="val => select = val"
></v-select>

2. 优化按钮切换逻辑（可选） #

如果需要按钮能在FL和GA之间反复切换，修改setSelect方法：

setSelect(){
  this.select = this.select === 'GA' ? 'FL' : 'GA'
}

修改后，select变量始终与v-select的选中状态保持同步，无论用户手动选择什么，点击按钮都能正确切换选项。

内容的提问来源于stack exchange，提问作者Luiz Alves