在VueJS中取消选中带有标签的CheckBox

Question

我试图取消选中使用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，帮助不胜感激。

Answer 1

将checkedNameas参数传递给方法并过滤数组，而不是分配变量。

首先，将checkedName参数添加到uncheck：

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

然后使用该参数从checkedNames数组中删除该名称：

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

下面的演示。

<li @click="uncheck(checkedName)" ... v-for="checkedName in 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;
    }
  }
})