web-dev-qa-db-fra.com

comment définir le délai d'expiration dans une méthode vueJs

comment puis-je utiliser la fonction settimeout () dans une méthode vuejs?

J'ai déjà essayé quelque chose comme ça, mais ça ne marche pas 

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

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

Je reçois ce message d'erreur: Uncaught TypeError: this.fetchHole is not a function

javascriptphpjquerylaravel-5vue.js
20
user3757488

Essayez ceci: setTimeout(this.fetchHole, 1000) car this dans la fonction anonyme est attaché à cette fonction anonyme et non à votre fonction principale

25
nospor

Ajoutez un appel bind() à votre déclaration de fonction:

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

afin que la variable this de votre composant Vue soit accessible dans la fonction.

Note latérale: La réponse acceptée de @ nospor est plus propre dans cette situation particulière. L'approche bind est un peu plus généralisée - très utile si vous voulez faire une fonction anonyme, par exemple.

31
ceejayoz

Le problème classique avec la variable contextuelle this en JavaScript. 

La partie de code suivante montre une solution simple - si vous utilisez ES6 avec Vuejs (configuration par défaut avec vuecli y babel). Utiliser une fonction de flèche

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

Je pense que cela fonctionne aussi.

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

Appel récursif avec TimeOut:

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