web-dev-qa-db-ja.com

vue js？

私はそれ自体でデータを変更するメソッドを持っています、簡単な例：

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
    }
  }
});

正しいメソッドを使用してそのようなウォッチャーを作成する方法vue js？または、コンポーネントでウォッチするプロップを使用する必要がありますか？

javascriptmethodsvue.jscomponents
7
Jarvis

Vueコンポーネントは、オブジェクトであるwatchプロパティを持つことができます。オブジェクトキーは、監視する必要がある小道具またはデータの名前である必要があり、値は、データが変更されたときに呼び出される関数です。

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