VueJS中的Intercept复选框更改事件

Question

我有很长的复选框。我希望其中三个的两组充当单选按钮。现在，撇开我的UX选择，我该如何进行这项工作？

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

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

很好 但是在内部拦截val和更新不会：this.layerhandler()

        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)总是第一个被触发，而其他两个字段总是立即设置为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>