vue 中 watch如何監聽陣列或物件中的某個值?
使用watch監聽陣列或物件時, 發現返回的新舊值是一樣的, 官方文件給出了答案 :
這需要使用到 this.$set方法 , 它接受三個引數 : (object / array , properyName / index , value) ,
看下例項 :
在 data中命名一個物件 a , 一個陣列 b :
data () {
retutn {
a : {name : 'lily', age : 18} ,
b : [
{name : '小明' , age : 14} ,
{name : '小紅' , age : 15}
]
}
} ,
在methods中對 a , b 進行操作 :
methods : {
set() {
this.$set(a , 'age' , 20);
this.$set(b, 1 , {name : '小紅' , age : 16} ;
}
}
在computed監聽新變數 , 一定要用JSON.parse 和 JSON.stringify 轉化一下, 不然watch監聽時返回的新舊值還是一樣的 .
computed : {
newA : function () {
return JSON.parse(JSON.stringify(this.a))
} ,
newB : function () {
return JSON.parse(JSON.stringify(this.b))
}
}
watch監聽 , handler函式的兩種寫法都是可以的, 但是不能使用箭頭函式 .
watch : {
newA : {
handler : function (newVal, oldVal) {
console.log(newVal,oldVal)
},
immediate : true //初始化頁面後立即監聽
} ,
newB : {
handler (newVal , oldVal) {
console.log(newVal , oldVal)
} ,
immediate : true
}
}
觸發set方法後 , 最後列印的結果 :
完結 , 撒花✿✿ヽ(°▽°)ノ✿
相關文章
- vue監聽input是否為空(監聽值為物件某個屬性)Vue物件
- 監聽 watch props物件屬性監聽 或深度監聽物件
- Vue:watch 監聽多個屬性值的方法Vue
- js 取陣列中某個物件的集合JS陣列物件
- 019、Vue3+TypeScript基礎,使用watch監視物件資料時,如何監控整個物件或單獨監控物件某個屬性VueTypeScript物件
- Js陣列物件的屬性值升序排序,並指定陣列中的某個物件移動到陣列的最前面JS陣列物件排序
- vue是如何監聽陣列變化的Vue陣列
- 寫個方法判斷陣列物件中是否存在某個物件陣列物件
- 論如何監聽物件某個屬性的變化物件
- JS的平凡之路–模仿Vue寫個陣列監聽JSVue陣列
- 如何監聽陣列變化?陣列
- 陣列物件按物件某個屬性排序陣列物件排序
- vue2的監聽watch小爆料Vue
- 合併陣列物件中相同的屬性值陣列物件
- vue中如何監聽vuex中的資料變化Vue
- 如何從陣列中隨機取出幾個值組成新的陣列?陣列隨機
- 微信分享、vue中select的v-model繫結(監聽enter鍵)、陣列物件重組(18/06/22)Vue陣列物件
- watch監聽
- vue watch陣列引發的血案Vue陣列
- vue3如何進行資料監聽watch/watchEffectVue
- 判斷某個陣列在不在物件裡陣列物件
- 查詢陣列中相似欄位(陣列裡面某個值相似歸類到一起)陣列
- vue3+ts 定義props中的物件陣列Vue物件陣列
- vue2-使用watch監聽路由的變化Vue路由
- js陣列操作——物件陣列根據某個相同的欄位分組JS陣列物件
- vue監聽頁面中的某個div的滾動事件,並判斷滾動的位置Vue事件
- Javascript中的陣列物件排序JavaScript陣列物件排序
- JS 中特殊的物件-陣列JS物件陣列
- PHP 多維陣列排序-按某個 key 的值PHP陣列排序
- Vue.js中偵聽器watch 的高階用法Vue.js
- vue中陣列變動不被監測問題Vue陣列
- 去除陣列中的 null 值陣列Null
- 論如何監聽一個物件的變化物件
- JS如何判斷一個陣列是否為空、是否含有某個值JS陣列
- 【爬坑日記】vue中watch物件中某一個屬性變化Vue物件
- java8 對list集合中的物件遍歷,重新賦值兩種方法,遍歷某個屬性返回陣列Java物件賦值陣列
- 如何過濾掉 PHP 陣列中的空值?PHP陣列
- Vue_watch深度監聽的正確開啟方式Vue