Kann nicht darauf zugreifen, während Suchanfragen in Vue mit Lodash entprellt werden?

Question

Ich habe eine einfache Sucheingabe:

<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> 

Wenn Sie einen Wert eingeben, wird es eine Remote-API abfragen, um zu holen und dann die Daten anzeigen:

... 
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 
    } 
}) 

Das Problem hierbei ist, dass console.log(this) kehrt undefined .

Ich habe dies in einer anderen Anwendung verwendet und es funktioniert so kämpfen, um zu verstehen, warum nicht hier.

Gibt es etwas, das ich dort falsch gemacht habe, scheint korrekt zu sein, aber egal was ich versuche, kann ich nicht den Umfang der Vue-Anwendung in dieser debuncedSearch-Methode zugreifen?

Answer 1

Ziemlich sicher, Ihr Problem ist die Verwendung der this-speichern Funktion Stil. Sie müssen eine Möglichkeit haben, sich auf das Vue-Objekt zu beziehen, das Sie erstellen (es ist nicht this an dem Punkt, an dem Ihre Entprellfunktion definiert ist). Ein Weg wäre

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