Vue.js中如何实现点击CLEAR按钮重置下拉组内所有复选框的选中状态

1. 定义响应式状态存储复选框选中值 #

不要直接通过DOM操作控制原生复选框的选中状态，先在组件的data中声明和四个厚度规格一一对应的响应式变量，初始值全部为未选中：

data() {
  return {
    thicknessSelected: {
      '2.0': false,
      '22.0': false,
      '3.0': false,
      '4.0': false
    }
  }
}

2. 绑定复选框和响应式状态 #

改造ul列表内的四个复选框，通过v-model把原生选中状态和上一步定义的变量关联，原有复选框和对应label的id关联逻辑完全保留，不需要调整：

<ul>
  <li>
    <input type="checkbox" id="thick-2mm" v-model="thicknessSelected['2.0']">
    <label for="thick-2mm">2.0mm</label>
  </li>
  <li>
    <input type="checkbox" id="thick-22mm" v-model="thicknessSelected['22.0']">
    <label for="thick-22mm">22.0mm</label>
  </li>
  <li>
    <input type="checkbox" id="thick-3mm" v-model="thicknessSelected['3.0']">
    <label for="thick-3mm">3.0mm</label>
  </li>
  <li>
    <input type="checkbox" id="thick-4mm" v-model="thicknessSelected['4.0']">
    <label for="thick-4mm">4.0mm</label>
  </li>
</ul>

3. 实现CLEAR的重置逻辑 #

给class为thickness-productlist的CLEAR元素绑定独立的点击方法，重置逻辑不需要操作DOM，只需要把存储的选中状态全部改回false，Vue会自动同步所有复选框的展示状态：

methods: {
  // 原有下拉展开方法，逻辑完全保留
  thicknessOnClick() {
    // 原有的展开/收起下拉面板的逻辑不做改动
  },
  // 新增CLEAR对应的重置方法
  clearThicknessSelection() {
    Object.keys(this.thicknessSelected).forEach(optionKey => {
      this.thicknessSelected[optionKey] = false
    })
  }
}

CLEAR元素的模板绑定写法：

<div class="thickness-productlist" @click="clearThicknessSelection">CLEAR</div>

注意：后续如果新增厚度规格选项，只需要在thicknessSelected对象里追加对应字段即可，重置方法的逻辑不需要任何修改，不会出现漏清状态的问题。

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