Невозможно получить к нему доступ, пока поиск запросов на поиск в Vue с Lodash?

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 ,

Я использовал это в другом приложении, и он работает так, чтобы понять, почему не здесь.

Есть ли что-то, что я сделал неправильно там, кажется правильным, но независимо от того, что я пытаюсь, я не могу получить доступ к области применения Vue в этом методе debouncedSearch?

Answer 1

Удовлетворительно, ваша проблема заключается в использовании стиля функции -preserving. Вам нужно обратиться к объекту Vue, который вы создаете (это не 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) 
    },