How to check when data changes in component by itself with vue js?

Question

I have method that changes data in itself, simple example:

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

How to create such watcher using correct methods vue js? Or I need to use props watching it in component?

tony19 · Accepted Answer · 2022-07-15 01:10:31Z

36

Vue components can have a watch property which is an object. The object keys need to be the name of the prop or data that needs to be watched, and the value is a function that is invoked when the data changes.

https://v2.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();
          }
      }
  }
});

edited Jul 15, 2022 at 1:10

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 13, 2017 at 20:00

kmc059000

3,0882 gold badges26 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jarvis Over a year ago

Thanks a lot, I knew it should be simple!

Collectives™ on Stack Overflow

How to check when data changes in component by itself with vue js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related