VueJ에서 가로채기 확인란 변경 이벤트s

VueJ에서 가로채기 확인란 변경 이벤트s

체크박스가 길어요.3명씩 두 그룹으로 나눠서 라디오 버튼 역할을 해 주셨으면 합니다.UX의 선택은 제쳐두고 어떻게 하면 좋을까요?

체크박스는 단일 객체의 속성으로 구현됩니다.layer:

data() {
  return {
    layer: {},
  }
},
watch: {
  layer: {
    handler(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를 관리하는 것이 더 복잡해지므로 실제 라디오 버튼을 구현할 필요는 없습니다.)

예: 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>

언급URL : https://stackoverflow.com/questions/48657544/intercept-checkbox-change-event-in-vuejs