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>

helpers/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 (evaluate '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。