在 VueJS 中拦截复选框更改事件答案

【问题标题】：Intercept checkbox change event in VueJS在 VueJS 中拦截复选框更改事件
【发布时间】：2021-03-07 06:03:21
【问题描述】：

我有一长串复选框。我希望他们中的两组三个充当单选按钮。现在，撇开我的 UX 选择不谈，我怎样才能做到这一点？

复选框被实现为单个对象的属性，layer：

data() {
  return {
    layer: {},
  }
},
watch: {
  layer: {
    handler(val, oldval) {
      mapping.updateLayers(val)
    },
    deep: true,
  },
},

效果很好。但是拦截val 并在handler() 内部更新this.layer 不会：

handler: function(val, oldval) {
  if (val.FutureYear) { this.layer.NextYear = false; this.layer.ExistingYear = false; }
  if (val.ExistingYear) { this.layer.NextYear = false; this.layer.FutureYear = false; }
  if (val.NextYear) { this.layer.ExistingYear = false; this.layer.FutureYear = false; }
  mapping.updateFoiLayers(val);
},

我怎样才能达到这个结果？（我宁愿不必实现实际的单选按钮，因为这会使管理所有层和 UI 变得更加复杂。）

【问题讨论】：

一个可能的问题是您没有将初始值设置为layer。见vuejs.org/v2/guide/instance.html#Data-and-Methods。 When a Vue instance is created, it adds all the properties found in its data object to Vue’s reactivity system.It should be noted that properties in data are only reactive if they existed when the instance was created.
这部分工作正常 - 这就是 deep: true 的用途。

标签： checkbox vue.js radio-button vuejs2

【解决方案1】：

示例：https://codepen.io/jacobgoh101/pen/NyRJLW?editors=0010

主要问题是watch中的逻辑。

如果已选择 FutureYear，则其他字段将变为不可更改。因为if (val.FutureYear)总是第一个被触发，另外2个字段总是会立即设置为false。

关于watch的另外一点就是它会在什么时候触发

用户更改了值
程序更改了值（这是不必要的，使事情更难处理）

因此，在这种情况下处理@change事件更合适。

methods: {
    handleChange: function(e) {
      const name = e.target.name;
      if (this.layer[name]) {
        Object.keys(this.layer).map((key)=>{
          if(key != name) {
            this.layer[key] = false;
          }
        })
      }
    }
  }

html

<div id="app">
  <input type="checkbox"/ v-model="layer.FutureYear" name="FutureYear"  @change="handleChange($event)">FutureYear<br/>
  <input type="checkbox"/ v-model="layer.NextYear" name="NextYear"  @change="handleChange($event)">NextYear<br/>
  <input type="checkbox"/ v-model="layer.ExistingYear" name="ExistingYear"  @change="handleChange($event)">ExistingYear<br/>
 </div>

【讨论】：