使用VUEJS的Quasar Multi Select值组件

Question

我在项目中使用Vuejs和Quasar，我正在尝试进行自动完成选择以选择一些值，当用户试图键入一些文本时，将API发送到服务器以检索。所有值都包含文本，这是代码：

<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”时，我可以看到DB检索到的数据，当我对所需的值（类型text Text）在多选组件上使用：

我如何删除类型文本？

Answer 1

使用ref and updateInputValue进行清除输入。

https：//codepen.io/pratik__007/pen