라벨이 VueJ로 되어 있는 CheckBox의 선택을 해제합니다.s

라벨이 VueJ로 되어 있는 CheckBox의 선택을 해제합니다.s

VueJs의 라벨을 사용하여 체크박스를 끄려고 합니다.

데모:

new Vue({
  el: '#app',
  data: {
    checkedNames: [],
    checkedName: true
  },
  methods: {
    uncheck: function() {
      this.checkedName = !this.checkedName;
    }
  }
})

li.badge.badge-primary {
  cursor: pointer;
  margin: 5px;
  font-size: 100%;
}

ul.checkboxes {
  list-style: none;
}

ul.tags {
  margin-top: -110px;
  margin-left: 85px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id='app'>
  <ul class="checkboxes">
    <li><input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label></li>

    <li><input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label></li>

    <li><input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label></li>
  </ul>
  <br/>
  <ul class="tags">
    <li @click="uncheck" class="badge badge-pill badge-primary" v-for="checkedName in checkedNames">
      {{ checkedName }}
    </li>
  </ul>
</div>

여기서 위 코드에 표시된 라벨을 사용하여 선택한 체크박스를 끌 수 없습니다.

방금 VueJs로 시작했는데, 도와주셔서 감사합니다.

패스 더checkedName변수를 할당하는 대신 메서드에 인수를 지정하고 배열을 필터링합니다.

먼저 추가checkedName에 대한 의론.uncheck:

<li @click="uncheck(checkedName)" ... v-for="checkedName in checkedNames">

그런 다음 이 인수를 사용하여 해당 이름을 삭제합니다.checkedNames어레이:

this.checkedNames = this.checkedNames.filter(name => name !== checkedName);

아래 데모

new Vue({
  el: '#app',
  data: {
    checkedNames: [],
    checkedName: true
  },
  methods: {
    uncheck: function(checkedName) {
      this.checkedNames = this.checkedNames.filter(name => name !== checkedName);
      //this.checkedName = !this.checkedName;
    }
  }
})

li.badge.badge-primary {
  cursor: pointer;
  margin: 5px;
  font-size: 100%;
}

ul.checkboxes {
  list-style: none;
}

ul.tags {
  margin-top: -110px;
  margin-left: 85px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id='app'>
  <ul class="checkboxes">
    <li><input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label></li>

    <li><input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label></li>

    <li><input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label></li>
  </ul>
  <br/>
  <ul class="tags">
    <li @click="uncheck(checkedName)" class="badge badge-pill badge-primary" v-for="checkedName in checkedNames">
      {{ checkedName }}
    </li>
  </ul>
</div>

언급URL : https://stackoverflow.com/questions/49629071/uncheck-checkbox-with-its-label-in-vuejs