Vue検索入力時にAjax応答配列

Question

Ajax呼び出しから取得するテキストボックスに入力するときにリストをフィルタリングしようとしています。この問題は、Ajaxの準備が整う前にフィルタが適用されているようです。

HTML：

<input type="text" class="form-control" v-model="searchTerm"> 
<table> 
    <tr v-for="food in filteredItems"> 
     <td>{{ food.name }}</td> 
     <td>{{ food.energy }}</td> 
    </tr> 
</table> 

ヘルパー/ index.js：

export default { 
    getFoods() { 
    return Vue.http.get('http://localhost:3000/foods/allfoods') 
     .then((response) => { 
      return response.data; 
    }); 
    } 
} 

Vueのコンポーネント：

import helpers from '../helpers' 
export default { 
    name: 'Search', 
    mounted() { 
    helpers.getFoods().then((response) => { 
     this.foodData = response; 
    }); 
    }, 
    data() { 
    return { 
     searchTerm: '', 
     foodData: [], 
    } 
    }, 
    computed: { 
    filteredItems() { 
     return this.foodData.filter(function(food){return food.name.toLowerCase().indexOf(this.searchTerm.toLowerCase())>=0;}); 
    } 
    } 

私はページをロードしたり、私が

'TypeError: undefined is not an object (evaluating 'this.searchTerm')'.

を取得する入力を開始

foodData配列をハードコードするとすべてが正常に動作します。

私は何か誤解していましたか、何が間違っていますか？

Answer 1

計算されたフィルタ関数のコールバックで、thisがVueを指していません。

computed: { 
    filteredItems() { 
    return this.foodData.filter(function(food){ 
     // in this next line, this.searchTerm is likely undefined 
     // because "this" is not the Vue 
     return food.name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) >= 0; 
    }); 
    } 
} 

あなたがコールバックとしてfunction(food){...}を使用しているためです、とthisは含む範囲となります。代わりに、矢印関数、クロージャ、またはbindを使用します。

computed: { 
    filteredItems() { 
    return this.foodData.filter(food => { 
     // in this next line, this.searchTerm is likely undefined 
     // because "this" is not the Vue 
     return food.name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) >= 0; 
    }); 
    } 
} 

console.clear() 
 

 
const foods = [{ 
 
    name: "orange", 
 
    energy: 10 
 
    }, 
 
    { 
 
    name: "apple", 
 
    energy: 8 
 
    }, 
 
    { 
 
    name: "banana", 
 
    energy: 12 
 
    }, 
 
    { 
 
    energy: 1000 
 
    } 
 
] 
 

 
const Search = { 
 
    name: 'Search', 
 
    template: ` 
 
     <div> 
 
     <input type="text" class="form-control" v-model="searchTerm"> 
 
     <table> 
 
      <tr v-for="food in filteredItems"> 
 
      <td>{{ food.name }}</td> 
 
      <td>{{ food.energy }}</td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    `, 
 
    mounted() { 
 
     setTimeout(() => this.foodData = foods, 500) 
 
    }, 
 
    data() { 
 
     return { 
 
     searchTerm: '', 
 
     foodData: [], 
 
     } 
 
    }, 
 
    computed: { 
 
     filteredItems() { 
 
     const searchTerm = this.searchTerm.toLowerCase() 
 
     return this.foodData 
 
      .filter(food => food.name && food.name.toLowerCase().includes(searchTerm)) 
 
     } 
 
    } 
 
    } 
 
new Vue({ 
 
    el:"#app", 
 
    components: {Search} 
 
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<div id="app"> 
 
    <search></search> 
 
</div>

How to access the correct this inside a callbackを参照してください。