Domanda come impostare il timeout in un metodo vueJs


come posso usare la funzione settimeout () in un metodo vuejs?

Ho già provato qualcosa di simile, ma non funziona

fetchHole: function () { 
    //get data
},

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

Ottengo questo messaggio di errore: Uncaught TypeError: this.fetchHole is not a function


17
2018-05-26 15:35


origine


risposte:


Prova questo: setTimeout(this.fetchHole, 1000) perché this in funzione anonima è collegato a quella funzione anonima non alla tua funzione principale


21
2018-05-26 15:51



Aggiungere un bind() chiama alla tua dichiarazione di funzione:

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

così che il tuo componente Vue this è accessibile all'interno della funzione.

Nota a margine: la risposta accettata di @nospor è più pulita in questa particolare situazione. Il bind l'approccio è un po 'più generalizzato - molto utile se si vuole fare una funzione anonima, per esempio.


29
2018-05-26 16:04



Il classico problema con contestuale this in JavaScript.

La seguente parte di codice mostra una soluzione semplice: se si utilizza ES6 con Vuejs (configurazione predefinita con vuecli y babel). Usa una funzione freccia

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

11
2018-06-30 11:39



Penso che funzioni anche questo.

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

0
2018-05-30 15:09



Chiama ricorsiva con TimeOut:

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

0
2018-05-24 11:47