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

非常确定您的问题是使用this - 保留功能样式。你需要一种方法来引用你正在创建的Vue对象（在你的debounce函数被定义的时候它不是this）。一种方法是做

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

Answer 2

要解决此问题，只需将箭头函数替换为function（）{}

替换此：

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

与此：

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

希望帮助别人花了我很多时间来解决这个问题。

使用Lodash在Vue中解除搜索请求时无法访问此内容？

2 个答案: