Vue.js中v-for循环内点击单个复选框出现多选问题如何解决？

问题根因 #

多选联动异常的核心原因是所有循环生成的复选框都绑定了同一个全局checked变量：

• v-for循环里每个复选框的v-model都指向同一个checked值，修改其中一个就会同步修改所有复选框的选中状态
• 重复设置id="productname"违反HTML id唯一的规范，反而会导致表单控件关联异常，这也是你之前修改id没有生效的原因

修复方案 #

1. 调整数据结构 #

将原来布尔类型的checked变量改为数组类型，用来存储所有选中复选框的value值：

// Vue实例的data配置调整示例
data() {
  return {
    searchString: '',
    sortKey: '',
    checked: [], // 从原有布尔值改为空数组
    sortedItems: [
      // 保留你原有列表数据即可
    ]
  }
}

2. 修正模板代码 #

调整v-for绑定、复选框配置以及内容显隐判断逻辑：

<div id="example-1">
  <ul>
    <input type="text" v-model="searchString" placeholder="Filter" />
    <p>sortKey = {{sortKey}}</p>
    <!-- 给v-for添加key属性，避免Vue节点复用异常 -->
    <li v-for="item in sortedItems" :key="item.name">
      <!-- 移除重复id，保留value绑定，v-model指向数组checked -->
      <input class="checkbox-align" type="checkbox" :value="item.name" v-model="checked" /> 
      {{ item.price }} - {{ item.name }}
    </li>
  </ul>
  <!-- 选中项数组为空时显示内容，和原有功能逻辑完全对齐 -->
  <div class="cecont" v-if="checked.length === 0">
    <p>text content</p>
  </div>
</div>

实现说明 #

当复选框的v-model绑定数组类型变量时，Vue会自动将选中项的value值推入数组、取消选中时移除对应值，每个复选框的选中状态独立判断自身value是否在数组中，不会出现联动选中的问题。同时通过判断数组长度即可实现「任意复选框勾选就隐藏内容」的需求。

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