Question

我正在尝试取消选中一个复选框，该复选框在VueJs中使用其标签进行检查。

样本：

＆＃13;

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

＆＃13;

li.badge.badge-primary {
  cursor: pointer;
  margin: 5px;
  font-size: 100%;
}

ul.checkboxes {
  list-style: none;
}

ul.tags {
  margin-top: -110px;
  margin-left: 85px;
}

＆＃13;

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

＆＃13;

在这里，我无法取消选中所选复选框，使用标签显示在上面的代码中。

刚开始使用VueJS，非常感谢。

Answer 1

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

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

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

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

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

下面的演示。

＆＃13;

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

＆＃13;

li.badge.badge-primary {
  cursor: pointer;
  margin: 5px;
  font-size: 100%;
}

ul.checkboxes {
  list-style: none;
}

ul.tags {
  margin-top: -110px;
  margin-left: 85px;
}

＆＃13;

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

＆＃13;

在VueJS中取消选中CheckBox及其标签

1 个答案: