web-dev-qa-db-fra.com

Comment vérifier quand les données changent de composant par elles-mêmes avec vue js?

J'ai une méthode qui modifie les données en soi, exemple simple:

Vue.component('component', {
  template: '#component',
  data: function () {
    return {
      dataToBeWatched: ''
    }
  },
  methods: {
    change: function (e) {
      var that = this;
      setTimeOut(function() {
        that.dataToBeWatched = 'data changed';
      }, 2000);
    },
    makeSmthWhenDataChanged: function () {
      // ajax request when dataToBeWatched changed or when dataToBeWatched isn't empty
    }
  }
});

Comment créer un tel observateur en utilisant les bonnes méthodes vue js? Ou dois-je utiliser des accessoires en le regardant dans le composant?

javascriptmethodsvue.jscomponents
7
Jarvis

Les composants Vue peuvent avoir une propriété watch qui est un objet. Les clés d'objet doivent être le nom de l'accessoire ou des données à surveiller, et la valeur est une fonction qui est invoquée lorsque les données changent.

https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

Vue.component('component', {
  template: '#component',
  data: function () {
    return {
      dataToBeWatched: ''
    }
  },
  methods: {
    change: function (e) {
      var that = this;
      setTimeOut(function() {
        that.dataToBeWatched = 'data changed';
      }, 2000);
    },
    makeSmthWhenDataChanged: function () {
      // ajax request when dataToBeWatched changed or when dataToBeWatched isn't empty
    }
  },
  watch: {
      dataToBeWatched: function(val) {
          //do something when the data changes.
          if (val) {
              this.makeSmthWhenDataChanged();
          }
      }
  }
});
16
kmc059000