我想要這個功能：createComparation 在 tableRowName 改變時作業，但是當 tableRowName 改變時，它沒有作業，vue 跟隨；createComparation 是另一個沒有由 vue 定義但僅由 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')
uj5u.com熱心網友回復：
如果tableRowName包含物件，那么您必須使用
深：真
watch: {
tableRowName(newtable,oldtable){
console.log(1)
createComparation()
},
immediate:true,
deep: true,
stockName(){
changeTip()
},
},
但我認為您在沒有反應方式的情況下更新陣列，Vue 無法檢測到陣列的以下更改：
當您直接使用索引設定專案時，例如
vm.items[indexOfItem] = newValue
當您修改陣列的長度時，例如
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 reactive
uj5u.com熱心網友回復：
我想whatching陣列可能是問題所在。你可以試試這個：
computed: {
rowNames() {
return this.tableRowName;
// if the line above doesn't work:
return this.tableRowName.join();
}
},
watch: {
rowNames(newtable,oldtable){
createComparation()
},
uj5u.com熱心網友回復：
我想這就是你要找的。您需要將處理程式定義為您嘗試觀察和設定的屬性的物件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>uj5u.com熱心網友回復：
watch 方法定義錯誤。當您需要立即使用時，您必須將函式體放入處理程式屬性中。
例如，
watch: {
tableRowName: {
handler: function() {
},
immediate: true
}
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/434626.html