vuejs怎么watch對象里某個屬性的變化
3 回答
瀟湘沐
TA貢獻1816條經驗 獲得超6個贊
用計算屬性，返回值是這個列表值相加
computed: { countTotal: function () { let total = 0; this.items.forEach(function (item) { total += item.count }) return total } }
監聽用 watch選項
watch: { items: { handler: function () {}, deep: true } }
對象要深復制，默認是淺復制
幕布斯6054654
TA貢獻1876條經驗 獲得超7個贊
<pre t="code" l="js">new Vue({
data: {
name: 'sigma'
},
watch:{
name: function( val ){
console.log( 'name has been changed:', val );
}
}
})
慕桂英3389331
TA貢獻2036條經驗 獲得超8個贊
如果data里有個變量，watch里只要有名字一樣的變量，就可以觀測到變量變化。比如這個例子里的“a”,"b","c". 一般使用“a”這種就可以，val是變化了的值，oldVal是改變前的值。
如果為了發現對象內部值的變化，可以在選項參數中指定 deep: true ，就是例子里“c”這種
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | var vm = new Vue({ data: { a: 1, b: 2, c: 3 }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 深度 watcher c: { handler: function (val, oldVal) { /* ... */ }, deep: true } } }) vm.a = 2 // -> new: 2, old: 1 |
添加回答
舉報
0/150
提交
取消