vue.js - 在使用 Lodash 对 Vue 中的搜索请求进行去抖动时无法访问它？

Question

我有一个简单的搜索输入:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js" type="text/javascript"></script>
<div id="app">
  <input type="text" v-model="search">
</div>

当您输入一个值时，它会查询远程 API 以获取并显示数据:

...
new Vue({
  el: '#app',
  data: {
    people: []
    search: ''
  },
  watch: {
    search() {
      // Rate limit
      this.debouncedSearch()
    }
  },
  methods: {
    debouncedSearch: _.debounce(() => {
      console.log(this)
      // self = this
      // io.socket.put('/search', this.search, (people, jwres) => {
      // self.people = people
      // })
    }, 500)
  },
  created(){
    this.people = locals.people
  }
})

这里的问题是 console.log(this) 返回 undefined。

我已经在另一个应用程序中使用过它，它的工作原理让我很难理解为什么不在这里。

我在那里做错了什么，似乎是正确的，但无论我尝试什么，我都无法在 debouncedSearch 方法中访问 Vue 应用程序的范围？

Answer 1

要解决这个问题，只需将箭头函数替换为 function() {}

替换这个:

methods: {
    debouncedSearch: _.debounce(() => {
      console.log(this) // undefined
    }, 500)
  },

有了这个:

methods: {
    debouncedSearch: _.debounce(function () {
      console.log(this) // not undefined
    }, 500)
  },

希望能帮助别人花了我很多时间才弄明白。