无法获得重置按钮以清除复选框
Can't get a reset button to clear out a checkbox
我正在使用 Vue.js v2,并且我已经定义了一个单文件组件 RegionFacet.vue。它列出了地图上与多边形相关的一些区域(单击一个值,地图上会出现相应的多边形)。
另外,我有一个重置按钮。当它被点击时,我调用 RegionFacet 中的一个方法来取消选中 RegionFacet 显示的任何复选框。该模型确实得到更新,但是,复选框保持选中状态。我错过了什么?
<template>
<div class="facet">
<div class="">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse"v-bind:href="'#facet-' + this.id"><h4 class="panel-title">Regions</h4></a>
</div>
<div v-bind:id="'facet-' + id" class="panel-collapse collapse in">
<ul class="list-group">
<li v-for="feature in content.features" class="list-group-item">
<label>
<input type="checkbox" class="rChecker"
v-on:click="selectRegion"
v-bind:value="feature.properties.name"
v-model="selected"
/>
<span>{{feature.properties.name}}</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['content'],
data: function() {
return {
id: -1,
selected: []
}
},
methods: {
selectRegion: function(event) {
console.log('click: ' + event.target.checked);
if (event.target.checked) {
this.selected.push(event.target.value);
} else {
var index = this.selected.indexOf(event.target.value);
this.selected.splice(index, 1);
}
this.$emit('selection', event.target.value, event.target.checked);
},
reset: function() {
this.selected.length = 0;
}
},
created: function() {
this.id = this._uid
}
}
</script>
<style>
</style>
你直接将数组长度设置为零,Vue无法检测到,如下所述:https://vuejs.org/v2/guide/list.html#Caveats
更多信息:https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
为了克服这个问题,您可以设置 this.selected
的值,如下所示:
reset: function() {
this.selected = [];
}
我正在使用 Vue.js v2,并且我已经定义了一个单文件组件 RegionFacet.vue。它列出了地图上与多边形相关的一些区域(单击一个值,地图上会出现相应的多边形)。
另外,我有一个重置按钮。当它被点击时,我调用 RegionFacet 中的一个方法来取消选中 RegionFacet 显示的任何复选框。该模型确实得到更新,但是,复选框保持选中状态。我错过了什么?
<template>
<div class="facet">
<div class="">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse"v-bind:href="'#facet-' + this.id"><h4 class="panel-title">Regions</h4></a>
</div>
<div v-bind:id="'facet-' + id" class="panel-collapse collapse in">
<ul class="list-group">
<li v-for="feature in content.features" class="list-group-item">
<label>
<input type="checkbox" class="rChecker"
v-on:click="selectRegion"
v-bind:value="feature.properties.name"
v-model="selected"
/>
<span>{{feature.properties.name}}</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['content'],
data: function() {
return {
id: -1,
selected: []
}
},
methods: {
selectRegion: function(event) {
console.log('click: ' + event.target.checked);
if (event.target.checked) {
this.selected.push(event.target.value);
} else {
var index = this.selected.indexOf(event.target.value);
this.selected.splice(index, 1);
}
this.$emit('selection', event.target.value, event.target.checked);
},
reset: function() {
this.selected.length = 0;
}
},
created: function() {
this.id = this._uid
}
}
</script>
<style>
</style>
你直接将数组长度设置为零,Vue无法检测到,如下所述:https://vuejs.org/v2/guide/list.html#Caveats
更多信息:https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
为了克服这个问题,您可以设置 this.selected
的值,如下所示:
reset: function() {
this.selected = [];
}