Vue.js实战：如何实现复选框与关联下拉选择框的绑定？

我帮你把这个Vue示例修复好了，直接就能运行！先梳理下原代码里的几个核心问题，再给你完整的可运行版本：

原代码的问题点 #

• users和roles用了错误的对象语法{{ ... }}，列表数据应该用数组[ ... ]存储
• form.users的结构设计不合理，导致复选框和下拉框的绑定路径出错
• 复选框的v-model绑定逻辑不匹配需求，无法关联用户选中状态和角色分配
• 最后展示区域的v-for语法错误，遍历逻辑混乱

修复后的完整可运行代码 #

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  添加新用户：
  <div class="row" v-for="user in users" :key="user.id">
    <div class="col s6">
      <label>
        <input 
          type="checkbox" 
          :checked="form.users.hasOwnProperty(user.id)"
          @change="toggleUser(user.id, $event.target.checked)"
        />
        <span>{{ user.name }}</span>
      </label>
    </div>
    <div class="col s6" v-if="form.users.hasOwnProperty(user.id)">
      <select class="browser-default" v-model="form.users[user.id]">
        <option v-for="role in roles" :key="role.id" :value="role.id">{{ role.name }}</option>
      </select>
    </div>
  </div>
  <br/>
  已选用户及角色：
  <div v-if="Object.keys(form.users).length === 0">暂无选中用户</div>
  <div v-for="(roleId, userId) in form.users" :key="userId">
    用户ID: {{ userId }} 角色ID: {{ roleId }}
  </div>
</div>

var data = {
  users: [
    { id: 1, name: 'John'}, 
    { id: 2, name: 'Donald'}
  ],
  roles: [
    { id: 1, name: 'Administrator'}, 
    { id: 2, name: 'Editor'}
  ],
  form: { users: {} }
}

var demo = new Vue({
  el: '#demo',
  data: data,
  methods: {
    toggleUser(userId, isChecked) {
      if (isChecked) {
        // 勾选时默认选中第一个角色，你也可以改成空或者其他默认值
        this.form.users[userId] = this.roles[0].id;
      } else {
        // 取消勾选时移除该用户的角色记录
        delete this.form.users[userId];
      }
    }
  }
})

关键修改说明 #

1. 修正了users和roles的数组结构，确保列表数据能正常遍历
2. 用@change事件替代直接v-model绑定复选框，更灵活地控制选中状态与角色记录的关联
3. 下拉框仅在用户被勾选时显示（v-if控制），避免无效的UI元素
4. 展示区域通过遍历form.users的键值对，清晰展示选中用户ID和对应的角色ID，还添加了空状态提示

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