Exploring the dynamic addition of watchers in Vue.js. The discrepancy between what is desired and what actually happens is demonstrated below in the commented section. As a casual coder, I believe my issue lies more in grasping JavaScript basics rather than Vue itself. Appreciate any help!
new Vue({
el: '#app',
data: {
a: 1,
b: 2,
c: 3
},
methods: {
setUpWatchers(array) {
for (var i in array) {
var key = array[i];
this.$watch(key, function(newValue) {
console.log(key + ': ' + newValue);
//desired output should be:
// a: 4
// b: 5
// c: 6
//actual output is currently:
// c: 4
// c: 5
// c: 6
});
}
}
},
created() {
this.setUpWatchers(['a', 'b', 'c']);
this.a = 4;
this.b = 5;
this.c = 6;
}
});