如何在多个表单中使用vue搜索选择

data() {
  return {
    searchResult: [],
    selectedOption: null
  };
}

<input type="text" v-model="selectedOption" @input="searchOptions">
<ul>
  <li v-for="option in searchResult" @click="selectOption(option)">{{ option }}</li>
</ul>

methods: {
  searchOptions() {
    // 根据输入框的值进行搜索，并更新搜索结果列表
    // 这里可以使用各种方法来获取和过滤数据，例如从后端API获取数据、本地数据过滤等
    // 搜索结果应该是一个数组，包含符合搜索条件的选项
    // 这里仅作示例，假设已经从后端API获取了所有选项，并保存在一个数组中
    const allOptions = ["选项1", "选项2", "选项3", "选项4", "选项5"];
    this.searchResult = allOptions.filter(option =>
      option.toLowerCase().includes(this.selectedOption.toLowerCase())
    );
  },
  selectOption(option) {
    // 当点击一个选项时，更新选择的项，并清空搜索结果
    this.selectedOption = option;
    this.searchResult = [];
  }
}