web-dev-qa-db-fra.com

Comment définir une minuterie avec une classe Vue.js

j'utilise simplement Vue.js pour mettre à jour des publications sur un site, c'est ce que j'ai ive jusqu'à présent (j'apprends encore le javascript, et pas trop bien)

[app.js] 

var Vue = require('vue');

Vue.use(require('vue-resource'));

var app = new Vue({

  el: '#app',

  components: {
    'postlist' : require('./components/postlist/postlist.js')
  }

});

[postlist.js] 

module.exports = {

  template: require('./postlist.template.html'),

  data: function () {
    return {
      'search': '',
      'posts' : {}
    }
  },

  methods: {
    'updatePosts' : function()
    {
      this.$http.get('api/posts', function(responce, status, request)
      {
        this.$set('posts', responce.data);
      });
    }
  }
};

Ce que je recherche, c’est que updatePost se déclenche toutes les x secondes. Comment procéder?

ive essayé de le faire dans le app.js 

setInterval(function()
{
  app.components.postlist.methods.updatePosts(); // doesnt work
  app.postlist.updatePosts(); //doesnt work either
}, 500);

et essayé de mettre le setInterval dans le composant lui-même

je suis assez perdu avec cela, quel est le meilleur moyen d'y parvenir?

updatePosts en cours d'exécution toutes les x secondes?

javascriptjqueryvue.js
9
Jimmy Howe

J'ai aussi des problèmes avec les portées dans Vue. 

cela devrait marcher

module.exports = {
  template: require('./postlist.template.html'),
  data: function () {
    return {
      'search': '',
      posts: {}
    }
  },
  methods: {
    updatePosts: function () {
      var self = this;
      self.$http.get('api/posts', function(responce, status, request) {
        self.posts = responce.data;
        setTimeout(function(){ self.updatePosts() }, 2000);
      });
    }
  },
  created: function () {
    this.updatePosts();
  }
}

Les fonctions dans Vue fonctionnent un peu différemment, car votre méthode updatePosts n'est pas une fonction normale. C'est une fonction définie dans l'objet $vm.methods. donc il ne peut pas être appelé régulièrement comme setTimeout($vm.updatePosts). En fait, $vm.updatePosts n'existe pas. si vous l'appelez comme $vm.updatePosts() c'est une histoire différente. $vm instance appelle automatiquement sa méthode ... La manière correcte est donc setTimeout(function(){ self.updatePosts() },2000)

5
WhipsterCZ

Vous pouvez démarrer le cycle de demande dans created ou ailleurs dans le cycle de vie. Il est également probablement préférable d’utiliser la récursion ici afin d’attendre le retour de la réponse avant d’en envoyer une autre. Je n'ai pas testé ce code complètement mais cela devrait fonctionner.

module.exports = {
  template: require('./postlist.template.html'),
  data: function () {
    return {
      'search': '',
      posts: {}
    }
  },
  methods: {
    updatePosts: function () {
      this.$http.get('api/posts', function(responce, status, request) {
        this.posts = responce.data;
        setTimeout(this.updatePosts, 2000);
      });
    }
  },
  created: function () {
    this.updatePosts();
  }
}
3
Bill Criswell