quiero que la función: createComparation funcione cuando cambie tableRowName, pero realmente cuando cambie tableRowName, no funcionó, vue sigue; createComparation es otra función que no se definió por vue sino solo por javascript
const selectedRight =Vue.createApp({ data(){ return { tableRow:0, tableRowName:[], stockName:[], rectWidth:40, rectHeight:5, } }, watch: { tableRowName(newtable,oldtable){ console.log(1) createComparation() }, immediate:true, stockName(){ changeTip() }, }, methods:{ } }).mount('#selectedRight')Supongo que la matriz whatching podría ser el problema. Puedes probar esto:
computed: { rowNames() { return this.tableRowName; // if the line above doesn't work: return this.tableRowName.join(); } }, watch: { rowNames(newtable,oldtable){ createComparation() },en caso de que tableRowName contenga objetos, entonces debe usar
profundo: verdadero
watch: { tableRowName(newtable,oldtable){ console.log(1) createComparation() }, immediate:true, deep: true, stockName(){ changeTip() }, },pero creo que está actualizando la matriz sin una forma reactiva, Vue no puede detectar los siguientes cambios en una matriz:
Cuando establece directamente un elemento con el índice, por ejemplo
vm.items[indexOfItem] = nuevoValor
Cuando modifica la longitud de la matriz, por ejemplo
vm.items.length = newLength
var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // is NOT reactive vm.items.length = 2 // is NOT reactiveCreo que esto es lo que estás buscando. Debe definir el controlador como un objeto para la propiedad que está tratando de ver y establecer immediate: true .
Vue.config.productionTip = false Vue.config.devtools = false new Vue({ el: "#app", data() { return { tableRow: 0, tableRowName: [], stockName: [], rectWidth: 40, rectHeight: 5, } }, watch: { tableRowName: { handler(newtable) { console.log('Calling createComparation function'); console.info(newtable); }, immediate: true } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="tableRowName.push(Math.random())">Trigger change manually again</button> </div>