Quasar Multi select 值组件使用 Vuejs

Question

我在我的项目中使用 Vuejs 和 Quasar，我正在尝试自动完成 select 到 select 某个值，当用户尝试输入一些文本时，一个 ZDB974238714CA8DE634A7CE1DZF083 被发送到服务器以检索。 所有值都包含该文本，代码如下：

 <template> <div class="autocomplete"> <q-select filled label="Search" v-model="searchTerm" use-input use-chips multiple @filter="filterFn" @input-value="inputValue" @filter-abort="abortFilterFn":options="searchResult" style="width: 395px":option-label="" option-value="text" > <template v-slot:no-option> <q-item> <q-item-section class="text-grey"> No results </q-item-section> </q-item> </template> </q-select> <div> <back-button @click="go" data-test="btn-back" forwardicon="arrowright" /> </div>

 <script> import { defineComponent, ref, computed } from "vue"; import { apiProductService } from "../../models/"; import apiEndPoints from "../../models/api"; import BackButton from "../ui/"; import { useRouter } from "vue-router"; import { useSearchStore } from "../../store/"; import _ from "lodash"; import { debounce } from "quasar"; export default defineComponent({ name: "search-bar", components: { BackButton }, setup(props, context) { const router = useRouter(); let searchTerm = ref(null); let searchResult = ref([]); const search = useSearchStore(); function filterFn(val, update, abort) { if (searchResult.value.length > 0) { update(); return; } abortFilterFn(); document.addEventListener('keypress', function(e) { true }); } function abortFilterFn() { // console.log('delayed filter aborted') } const inputValue = computed(() => debounce(suggestions, 0).bind(this)); function suggestions(val) { if (val) { getSearchData(val); document.addEventListener('keypress', function(e) { true }); } else { searchResult.value = []; } } const getSearchData = async (val) => { await apiProductService( apiEndPoints.GetSearchSuggestions.method, apiEndPoints.GetSearchSuggestions.url, { q: val, top: 5, suggester: "sg", } ).then((response) => { searchResult.value = response?.data?.suggestions || []; }); }; } return { searchTerm, searchResult, filterFn, inputValue }; }, });

代码的问题是当我尝试输入例如术语“tes”时，我可以看到为数据库检索的数据，当我点击所需的值时，类型文本是多选组件上的 savec，例如：

请问如何删除类型文本？

Answer 1

使用 ref 并使用updateInputValue来清除输入。

https://codepen.io/Pratik__007/pen/RwMWbwK