After I asked this previous question, another one came to mind: How to disable button if multiple form inputs do not change in Vue.js
Each form has a switch. When the form inputs are changed, the switch should go from an OFF state to an ON state. I achieved this by adding the following line to the watch method for each form:
this.items.forEach( (_, index) => {
this.$watch(['items', index].join('.'), {deep: true, handler: (newVal, oldVal) => {
this.changed.push(newVal.id)
this.items[index].switch = true
}});
});
However, after setting this.items[index].switch = true, the switch turns on correctly; but if a user switches it back off by clicking it, the text does not update anymore. It remains stuck on ON. How can this be fixed?