javascript - 清除除单击的所有复选框之外的所有复选框

Question

我有 3 个与项目相关的复选框，当单击/选中一个复选框时，我想清除其他复选框并选中选中的复选框。基本上是单选按钮行为。我不使用收音机的原因是每个客户和风格的目的。

我当前的功能有效，但是当我使用时forEach，它正在清除所有复选框。有没有办法让当前点击的人保持选中状态？

clearCheck(...checkboxToClear) {
  checkboxToClear.forEach(checkboxToClear => {
    if (this.formData[checkboxToClear] != "") {
      this.formData[checkboxToClear] = "";
    }
  });
}

复选框上的函数调用示例：

<el-checkbox
  v-model="formData.checkboxOne"
  name="checkboxOne"
  class="checkbox--center-align font--gray"
  :checked="true"
  @change="
    clearCheck('value1', 'value2');
  "
>
  Checkbox 1
</el-checkbox>

标签： javascriptvue.jselement-ui

Answer 1

如果v-model字段具有相似的名称（例如 、checkbox1和checkbox2）checkbox3，您可以使用for-loop 按名称清除与给定索引不匹配的字段：

<template>
  <el-checkbox v-for="i in 3"
               v-model="formData['checkbox' + i]"
               @change="onChange(i)">
    Option {{ i }}
  </el-checkbox>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        checkbox1: false,
        checkbox2: false,
        checkbox3: false,
      }
    }
  },
  methods: {
    onChange(index) {
      for (let i = 1; i <= 3; i++) {
        if (i !== index) {
          this.formData['checkbox' + i] = false
        }
      }
    }
  }
}
</script>

演示