无法获得重置按钮来清除复选框

Question

我正在使用 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>

Answer 1

您是直接将数组长度设置为零，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 = [];
}