Vue动态属性选择问题：已选属性被清空的动态解决方案

这个问题我太熟悉了——你用同一个v-model="selected"绑定所有下拉框，每次选新属性肯定会把之前的覆盖掉呀！既然属性是动态从API来的，不能硬编码每个属性的变量，那我们换个思路，把selected改成对象类型，让每个属性对应自己的键值对，就能完美解决这个问题。

核心改动点 #

• 把data里的单个selected变量改成对象，用来存储每个属性的选中值
• 下拉框的v-model绑定到selected[key]，这里的key就是动态属性名（比如Colour、Size）
• 可以直接复用这个对象作为selectedAttrObj，不用额外维护两个数据结构

修改后的完整代码 #

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
  <table>
    <tr>
      <th v-for="(item, key, index) in attributes">{{ key }}</th>
    </tr>
    <tr>
      <td v-for="(items, key, index) in attributes">
        <select v-model="selected[key]">
          <option v-for="name in items">{{ name }}</option>
        </select>
      </td>
    </tr>
  </table>
  <!-- 可以加个预览看看选中的结果 -->
  <p>已选属性: {{ selected }}</p>
</div>

<script>
function callMe(){
  var vm = new Vue({
    el : '#root',
    data : {
      attributes : {
        "Colour": ["red", "black", "purple"],
        "Size": ["8.0", "8.5", "9.0", "9.5", "10.0"]
      },
      // 改成对象，自动存储每个属性的选中值
      selected: {}
    },
    // 原来的selected_attributes方法可以去掉了，v-model会自动更新selected对象
    // 如果需要额外处理选中事件，再保留方法即可
    methods: {
      // 比如如果需要选中时做其他逻辑，可以保留
      // selected_attributes(key) {
      //   console.log(`${key}选中了:`, this.selected[key])
      // }
    }
  })
}
callMe();
</script>

为什么这样有效？ #

每个下拉框现在绑定的是selected对象中对应属性的键，比如Colour下拉框绑定selected.Colour，Size下拉框绑定selected.Size，它们是完全独立的变量，再也不会互相覆盖。而且selected对象本身就相当于你之前的selectedAttrObj，直接用它就能获取所有选中的属性值，不用额外做映射，代码更简洁。

如果之后需要对选中事件做额外处理（比如发送API请求），只需要给select加@change="selected_attributes(key)"，然后在方法里通过this.selected[key]获取当前选中值就行。

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