Vue 如何从计算中的异步/等待函数返回值

Question

我有一个 vue js 搜索栏，当我在输入栏中输入时，它需要根据匹配字符显示结果

为了获取数据，我使用异步等待函数来等待 api 响应，但它是经过计算的，因此它返回一个承诺，因此它无法识别它，但当我打印时，它显示了正确的数据，但它没有显示在 ui 中

`

<template>
 <li v-for="name in names">
      {{ name }}
    </li>
<template>
<script>
export default{
computed: {
  async filteredNames() {
return await apicall();
  }
}}</script>

Answer 1

如果过滤发生在组件中，则不需要每次过滤结果时都调用API。将API数据保存在组件中，并返回本地数据过滤后的结果：

<template>
 <input v-model="filterText">
 <li v-for="name in filteredItems">
    {{ name }}
 </li>
<template>

<script>
  export default{
    data(){
      return {
        allItems: [],
        filterText: ""
      }
    },
    computed: {
      filteredItems() {
          return this.allItems.filter(item => item.includes(this.filterText))
      }
    },
    mounted(){
      callApi().then(res => {
          this.allItems = res.data
      })
    }
  }
</script>