When trying to edit a component, the data is loaded with mounted in the following way:
mounted () {
var sectionKey = this.$store.getters.getCurrentEditionKey
this.table = _.clone(this.$store.getters.getDocumentAttributes[sectionKey])
this.table.tableGrid = _.clone(this.$store.getters.getDocumentAttributes[sectionKey].tableGrid)
this.entered = true
},
In order to track changes on the component, I modify the value of this.entered. I use a watcher to monitor when elements are loaded.
watch: {
'table.rows': function (val, oldValue) {
if (this.entered === true) {
if (val > oldValue) {
this.table.tableGrid.push([''])
} else if (val < oldValue) {
this.table.tableGrid.splice(this.table.tableGrid.length - 1, 1)
}
}
},
'table.cols': function (val, oldValue) {
if (this.entered === true) {
if (val > oldValue) {
for (var i = 0; i < this.table.rows; i++) {
this.table.tableGrid[i].push('')
}
} else if (val < oldValue) {
for (var j = 0; j < this.table.rows; j++) {
this.table.tableGrid[j].splice(this.table.tableGrid[j].length - 1, 1)
}
}
}
}
data () {
return {
entered: false,
table: {
rows: 1,
cols: 1,
insert: 1,
key: 'Table',
tableStyle: 1,
caption: '',
hasCaption: true,
hasHeader: true,
tableGrid: [
['']
]
}
}
},
The cols and rows values are obtained as follows to rebuild the table when they change:
tableRows () {
return parseInt(this.table.rows)
},
tableCols () {
return parseInt(this.table.cols)
}
I am tracking the table's cols and rows, but the watcher triggers before mounted. Any tips on how to handle this situation?