如何在Vue项目中为Vue Material Select组件动态设置选中值？

Vue Material 的 md-select 组件默认支持双向绑定，直接通过操作 v-model 绑定的响应式变量即可实现动态修改选中值，具体实现方式如下：

基础使用（选项为简单值类型） #

当选项的value为字符串、数字等简单类型时，直接修改绑定变量的值即可：

<template>
  <div>
    <md-select v-model="selectedFruit" placeholder="选择水果">
      <md-option 
        v-for="fruit in fruitList" 
        :key="fruit" 
        :value="fruit"
      >
        {{ fruit }}
      </md-option>
    </md-select>
    <!-- 点击按钮动态修改选中值 -->
    <md-button @click="setSelected">动态选中香蕉</md-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFruit: '',
      fruitList: ['苹果', '香蕉', '橙子', '葡萄']
    }
  },
  methods: {
    setSelected() {
      // 直接给绑定变量赋值为目标选项的value值即可
      this.selectedFruit = '香蕉'
    }
  }
}
</script>

选项为对象类型的场景 #

如果选项是对象结构，推荐优先使用唯一标识（如id）作为option的value值，避免对象引用匹配失败的问题：

<template>
  <div>
    <md-select v-model="selectedUserId" placeholder="选择用户">
      <md-option 
        v-for="user in userList" 
        :key="user.id" 
        :value="user.id"
      >
        {{ user.name }}
      </md-option>
    </md-select>
    <md-button @click="setSelectedUser">动态选中ID为2的用户</md-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedUserId: null,
      userList: [
        {id: 1, name: '张三'},
        {id: 2, name: '李四'},
        {id: 3, name: '王五'}
      ]
    }
  },
  methods: {
    setSelectedUser() {
      this.selectedUserId = 2
    }
  }
}
</script>

常见问题处理 #

如果遇到赋值后选中状态不生效的情况，可按以下思路排查：

• 确认赋值的内容和对应选项的value属性值完全一致，没有类型差异（如数字2和字符串'2'不匹配）
• 如果选项是异步接口返回的，要等选项列表赋值完成后再设置选中值，可搭配$nextTick确保渲染完成：

  // 异步获取选项后赋值示例
  fetchUserList().then(res => {
    this.userList = res.data
    this.$nextTick(() => {
      this.selectedUserId = 2
    })
  })
  

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