Vuejsで非同期計算データをフィルタリングする方法

Question

私はVuejs 2アプリでasyncComputedを使用しています。私はAPIからフェッチしている項目のリストをフィルタリングする必要があります。

これは私がこれまで持っているものです。

このような状況で

<template> 
    <div class="items"> 
     <input type="text" v-model="searchKey"> 
     <li v-for="item in items"> 
      <span>{{item.name}}</span> 
     </li> 
    </div> 
</template> 

<script> 
    import Items from '@/api/items'; 

    export default { 
     name: 'items', 
     data: { 
      searchKey: '' 
     } 
     asyncComputed: { 
      items: { 
       async get() { 
        const items = await Items.getAll(); 
        return items.data; 
       }, 
       default: [] 
      } 
     }, 
     methods: {}, 
     components: {} 
    } 
</script> 

、は、パイプ演算子でフィルタを使用することが可能である、または私は完全に新しいフィルタされたリストと使用を作成する必要があります代わりに、次のようになります。

computed: { 
    filteredItems: function() { 
     return this.items.filter((item) => item.name.toLowerCase().includes(this.searchKey.toLowerCase()); 
    } 
} 

また、フィルタリングされたリストを新たに作成する必要がある場合は、どうすれば非同期データでそれを行うことができますか？

Answer 1

あなたは、プラグインのいずれかなしにそれを行うことができ、このように：

<template> 
    <div class="items"> 
     <input type="text" v-model="searchKey"> 
     <select v-model="filterType"> 
      <option disabled value="">FilterBy</option> 
       <option>name</option> 
       <option>id</option> 
    </select> 
     <li v-for="item in filteredItems"> 
      <span>{{item.name}}</span> 
     </li> 
    </div> 
</template> 

<script> 
    import Items from '@/api/items'; 

    export default { 
     name: 'items', 
     data: { 
      searchKey: '', 
      items: null, 
      filterType:'' 
     } 
     methods: { 
      async fetchItems(){ 
       const items = await Items.getAll(); 
       this.items = Items.data; 
      } 
     }, 
     computed: { 
      filteredItems(){ 
       if(this.filterType === 'name'){ 
        return this.items.filter((item) => item.name.toLowerCase().includes(this.searchKey.toLowerCase()); 
       } 

       if(this.filterType === 'id'){ 
        return this.items.filter((item) => item.id.includes(this.searchKey); 
       } 

       if(!this.filterType){ 
        return this.items; 
       } 
      } 
     }, 
     created(){ 
      this.fetchItems(); 
     } 
    } 
</script> 

あなたもidすることにより、この場合には、リストがフィルタリングされるべきで基準を選択するselect入力を使用することができますか〜によってname。