如何在按钮单击时重置选中的复选框？ （vue.js）

Question

我正在做一个自定义搜索筛选器，你可以勾选复选框，以更好地适应你正在寻找的内容。 （使用vue.js）

我还想添加一个“清除”按钮，摆脱你以前在复选框中所做的所有勾号。 我有这个按钮:

<button @click="clear">
     <span class="letterspace">クリアする</span>
</button>

我不太确定如何定义这个方法，但我是这样写的:

methods: {
    clear() {
      (this.selectLocations = []), (this.selectItems = []);
    }
}

这是用于复选框的代码:

<div class="checkboxArea" v-show="showItem">
            <div id="checkboxes" v-for="(value, index) in items" :key="index">
              <label for="select" id="one">
                <input type="checkbox" :value="value" v-model="selectItems[index]" />
                {{ value }}
              </label>
           </div>
</div>

其中SelectItems在data属性中定义为空数组:

data() {
    return {
      selectItems: []
    };
  },

有人能帮我弄清楚吗？

Answer 1

我不知道this.SelectLocations是从哪里来的，因为我在模板中没有看到它，但是您的函数不能那样工作。

要重置选择项，您需要说:

clear() {
  this.selectItems = [];
}

这将清空所选项目，并再次取消选中所有复选框。