[Vuejs]-Vue How to return value from async/await function in a computed

by

2👍

✅

If the filtering is happening in the component, you don’t need to call the API every time when you are filtering the results. Save the API data in the component, and return the filtered results from local data:

<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>
👤Igor Moraru

Leave a comment