vue3+ts 重置搜索功能

在Vue3配合TypeScript（TS）的项目中，如果你想实现一个搜索框的重置功能，你可以创建一个方法来操作数据，并利用Vue的响应式特性来更新视图。下面是一个简单的例子：

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  template: `
    <div>
      <input v-model="searchTerm" @keyup.enter="search" />
      <button @click="resetSearch">重置搜索</button>
      <ul v-for="(item, index) in filteredItems" :key="index">
        <li>{{ item.name }}</li>
      </ul>
    </div>
  `,
})
export default class SearchComponent extends Vue {
  @Prop() items: any[]; // 假设items是你要搜索的数据

  searchTerm = '' // 搜索关键字

  get filteredItems(): any[] {
    return this.items.filter(item => item.name.includes(this.searchTerm));
  }

  search() {
    console.log('Searching for', this.searchTerm);
  }

  resetSearch() {
    this.searchTerm = '';
    this.$forceUpdate(); // 更新视图，因为v-model不会触发更新
  }
}

在这个组件中，当你输入并按回车键搜索时，`filteredItems`会根据`searchTerm`过滤出匹配的结果。点击“重置搜索”按钮，`resetSearch`方法会被调用，将`searchTerm`设置为空字符串，并通过`$forceUpdate`强制视图更新，以便清除搜索结果。