hoe een time-out in te stellen in een vueJs-methode

hoe kan ik de settimeout()-functie gebruiken in een vuejs-methode?

Ik heb al zoiets geprobeerd, maar het werkt niet

fetchHole: function () { 
    //get data
},
addHole: function () {
    //my query add new
    setTimeout(function () { this.fetchHole() }, 1000)
},

Ik krijg deze foutmelding: Uncaught TypeError: this.fetchHole is not a function

Antwoord 1, autoriteit 100%

Voeg een bind()-aanroep toe aan uw functiedeclaratie:

setTimeout(function () { this.fetchHole() }.bind(this), 1000)

zodat thisvan uw Vue-component toegankelijk is binnen de functie.

^{Kanttekening: het geaccepteerde antwoord van @nospor is duidelijker in deze specifieke situatie. De bind-aanpak is wat algemener – erg handig als je bijvoorbeeld een anonieme functie wilt uitvoeren.}

Antwoord 2, autoriteit 72%

Probeer dit: setTimeout(this.fetchHole, 1000)omdat thisin anonieme functie is gekoppeld aan die anonieme functie en niet aan uw hoofdfunctie

Antwoord 3, autoriteit 70%

Het klassieke probleem met contextuele thisin JavaScript.

Het volgende deel van de code toont een eenvoudige oplossing – als je ES6 gebruikt met Vuejs (standaardconfiguratie met vuecli y babel). Gebruik een pijlfunctie

setTimeout(()=>{
   this.yourMethod()
},1000);

Een pijlfunctie heeft geen eigen this. De thiswaarde van
de omsluitende lexicale scope wordt gebruikt;

Pijlfuncties – JavaScript | MDN

Antwoord 4, autoriteit 5%

Ik denk dat dit ook werkt.

var self = this;
setTimeout(function () { self.fetchHole() } , 1000)

Antwoord 5

Recursief bellen met TimeOut:

   save: function () {
      this.progressToProced = 0
      this.progress()          
    },
    progress: function () {
      if (this.progressToProced < 100) {
        this.progressToProced++
        setTimeout(function () { this.progress() }.bind(this), 100)
      }
    }

Antwoord 6

Je kunt proberen:

addHole:function(){
  let vm = this
  setTimeout(function(){vm.fetchHole()}, 1000)
}