checkbox - 拦截 VueJS 中的复选框更改事件

Question

我有一长串复选框。我希望其中两组(每组三个)充当单选按钮。现在，撇开我的用户体验选择不谈，我该如何进行这项工作？

复选框作为单个对象的属性实现，层:

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

这很好用。但是在 handler() 中拦截 val 并更新 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 变得更加复杂。)

Answer 1

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

主要问题是watch中的逻辑。

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

关于 watch 的另一件事是它会在什么时候被触发

• 用户更改了值
• 程序更改了值(这是不必要的，并且使事情更难处理)

因此，处理@change事件更适合这种场景。

JS

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>