如何通过@click按钮重置Vue产品筛选器？

1. 在模板中添加重置按钮 #

在页面合适位置添加绑定点击事件的重置按钮：

<button @click="resetFilters">重置筛选器</button>

2. 在Vue实例中定义重置方法 #

在你的Vue组件的methods选项中添加resetFilters方法，将所有筛选条件变量重置为null（匹配原筛选逻辑中“无筛选条件”的判断规则）：

methods: {
  resetFilters() {
    this.startFloor = null;
    this.endFloor = null;
    this.startSquare = null;
    this.endSquare = null;
    this.startPrice = null;
    this.endPrice = null;
  }
}

逻辑说明 #

原filteredData计算属性会自动监听startFloor、endFloor等变量的变化。当通过resetFilters方法将这些变量全部设为null时，计算属性会触发重新计算，进入“无筛选条件”的分支，返回所有avalFloors数据，从而完成筛选器的重置。

内容的提问来源于stack exchange，提问作者Георгий Графов