我试图取消选中在 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/[email protected] /cdn-cgi/l/email-protection/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 array:
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/[email protected] /cdn-cgi/l/email-protection/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
