Question

我有一长串复选框。我想两组中的三组作为单选按钮。现在，不考虑我的用户体验选择，我该如何做到这一点？

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

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

工作正常。但是拦截val并更新this.layer内的handler()并不是：

        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)始终是第一个被触发的，而另外两个字段将始终设置为假。

关于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>

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

1 个答案: