[Vuejs]-Checking for watch changes after data is set on mounted

by

0👍

Here is a snippet that includes a minimal set of features that you are trying to use, and it works as expected. Can you use it as a starting point to recreate your problem?

var vm = new Vue({
  el: '#app',
  data: {
    data: {
      rows: 1
    },
    entered: false
  },
  mounted() {
    var self = this;
    setTimeout(function() {
      self.data = {
        rows: 10
      };
      self.entered = true;
    }, 1200);
  },
  watch: {
    'data.rows': function(newValue) {
      if (this.entered) {
        console.log("Rows now", newValue);
      } else {
        console.log("Not entered!");
      }
    }
  }
});

setInterval(function() {
  ++vm.data.rows;
}, 800);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
</div>

Since you define this.table in your data section, it is a responsive variable, so you can set it as you do now:

this.table = _.clone(this.$store.getters.getDocumentAttributes[sectionKey]);

The question is whether this.table.tableGrid is responsive. If it is created by the clone above, it is. If not, not. If you don’t know, change this:

this.table.tableGrid = _.clone(this.$store.getters.getDocumentAttributes[sectionKey].tableGrid);

to

this.$set(this.table, 'tableGrid', _.clone(this.$store.getters.getDocumentAttributes[sectionKey].tableGrid);

(It seems to me that the first clone should have done the whole copy, tho.)

Leave a comment