在 VueJS 中取消选中 CheckBox 及其标签 [英] Uncheck CheckBox with its label in VueJS

问题描述

我试图取消选中在 VueJs 中使用其标签选中的复选框.

演示:

new Vue({el: '#app',数据: {检查名称:[]，已检查名称:true},方法: {取消选中:函数(){this.checkedName = !this.checkedName;}}})

li.badge.badge-primary {光标:指针；边距:5px；字体大小:100%；}ul.checkboxes {列表样式:无；}ul.tags {边距顶部:-110px；左边距:85px；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="样式表"/><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><div id='应用程序'><ul class="复选框"><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><br/><ul class="tags"><li @click="uncheck" class="徽章徽章-丸徽章-primary" v-for="checkedName in checkedNames">{{checkedName}}

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

刚开始使用 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',数据: {检查名称:[]，已检查名称:true},方法: {取消选中:功能(已检查名称){this.checkedNames = this.checkedNames.filter(name => name !== checkedName);//this.checkedName = !this.checkedName;}}})

li.badge.badge-primary {光标:指针；边距:5px；字体大小:100%；}ul.checkboxes {列表样式:无；}ul.tags {边距顶部:-110px；左边距:85px；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="样式表"/><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><div id='应用程序'><ul class="复选框"><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><br/><ul class="tags"><li @click="uncheck(checkedName)" class="徽章徽章-丸徽章-primary" v-for="checkedName in checkedNames">{{checkedName}}

I am trying to uncheck a checkbox which is checked using its label in VueJs.

DEMO:

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>

Here I am not able to uncheck the selected checkbox using it label as show in my above code.

Just started with VueJS, help appreciated.

解决方案

Pass the checkedName as argument to the method and filter the array instead of assigning a variable.

First, add checkedName argument to uncheck:

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

And then use that argument to remove that name from the checkedNames array:

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

Demo below.

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>

这篇关于在 VueJS 中取消选中 CheckBox 及其标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！