使用 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)
  },

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

Answer 2

很确定您的问题是使用this-preserving 函数样式。您需要一种方法来引用您正在创建的 Vue 对象（它不是this在定义 debounce 函数时）。一种方法是做

const vm = new Vue({
  el: '#app',
  ...
  methods: {
    debouncedSearch: _.debounce(() => {
      console.log(vm)
      // io.socket.put('/search', vm.search, (people, jwres) => {
      // vm.people = response
      // })
    }, 500)
  },