Vue에서 조건에 따라 확인란을 취소하려면 어떻게 해야 합니까?

Vue에서 조건에 따라 확인란을 취소하려면 어떻게 해야 합니까?

항상 체크박스를 1개 이상 켜고 싶지만 다음 개념을 혼합하여v-model그리고.:checked.

의사는 다음과 같이 말합니다.

v-model첫 번째를 무시합니다.value,checked또는selected모든 양식 요소에서 찾을 수 있는 속성.Vue 인스턴스 데이터는 항상 진실의 소스로 취급됩니다.

모델이 수정되는 것을 막을 수는 있지만 확인란이 선택되지 않도록 할 수는 없습니다.

일부 코드:

템플릿

<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
  <input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked" :checked="s.active">
  <label :for="id">{{ s.display }}</label>
</div>

모델userOutputSeries

data () {
  return {
    userOutputSeries: {
      foo: {
        display: 'Awesome Foo',
        active: true
      },
      bar: {
        display: 'My Bar',
        active: false
      }
    }
  }
}

그preventIfLessThanOneChecked핸들러

preventIfLessThanOneChecked (event) {
  // I don't update the model so it stay at the same state
  // But only need to count the active series and do what we want.
  console.log(event.target.value, event.target.checked)
}

네이티브 체크박스의 전파를 막을 방법이 있나요?

를 사용해 주세요.v-model대신:checked이 때문에, 로의 변경은userOutputSeries데이터 속성이 체크박스 입력에 반영됩니다.

그리고 나서,s로부터의 레퍼런스v-for그 오브젝트를 설정한다.active의 재산.true없으면active체크 박스:

new Vue({
  el: '#app',
  data() {
    return {
      userOutputSeries: {
        foo: {
          display: 'Awesome Foo',
          active: true
        },
        bar: {
          display: 'My Bar',
          active: false
        }
      }
    }
  },
  methods: {
    preventIfLessThanOneChecked(item) {
      if (item.active) {
        return;
      }
    
      let items = Object.values(this.userOutputSeries);
      if (!items.find(i => i.active)) {
        item.active = true;
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
    <input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked(s)" v-model="s.active">
    <label :for="id">{{ s.display }}</label>
  </div>
</div>

사용해보십시오.disabledon your single 체크박스:

<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
  <input type="checkbox" :id="id" :value="id"
      :disabled="(s.active && numberOfChecked == 1) ? disabled : null"
      @change="preventIfLessThanOneChecked" :checked="s.active">
  <label :for="id">{{ s.display }}</label>
</div>

위의 @thanksd의 답변에서는 체크박스는 꺼진 채로 있습니다.그래서 나는 나의 해결책을 쓰고 있다.

이것은 my loop 스테이트먼트입니다.파일에 따라 변수 이름을 변경합니다.

v-for="column in tableColumns"

이것은 나의 입력입니다(표시되어 있는 경우는 체크 박스가 켜져 있습니다).

<input type="checkbox" v-model="column.visible" @change="event => visibleColumnsChanged(column, event)">

그런 다음 변경 방법 - 보이는 항목이 남아 있지 않으면 column.visible을 true로 설정합니다.event.target을 사용합니다.= true를 선택하여 확인란을 다시 선택합니다.

visibleColumnsChanged: function(column, event){
  if (column.visible) {
    return;
  }

  if(! this.tableColumns.find(c => c.visible)){
    column.visible = true;

    event.target.checked = true;
  }
}

언급URL : https://stackoverflow.com/questions/46671725/in-vue-how-to-cancel-a-checkbox-based-on-a-condition