Vue3 watch 監聽物件陣列中物件的特定屬性
在 Vue 3 中，可以使用 watch 函式來監聽物件陣列中物件的特定屬性，可以通過在回呼函式中遍歷陣列來檢查物件的特定屬性是否發生變化，并在變化發生時執行相應的操作，
一、監聽物件的特定屬性
例如，假設有一個名為 items 的物件陣列，其中每個物件都有一個名為 checked 的布爾屬性和一個名為 name 的字串屬性，需要監聽 checked 屬性的變化，并在變化發生時執行相應的操作，可以使用以下代碼：
import { ref, watch } from "vue";
export default {
setup() {
const items = ref([
{ name: "item1", checked: false },
{ name: "item2", checked: true },
{ name: "item3", checked: false },
]);
watch(
() => items.value.map((item) => item.checked),
(newVal, oldVal) => {
console.log(`checked values changed from ${oldVal} to ${newVal}`);
}
);
return {
items,
};
},
};
在上面的例子中，使用 ref 函式創建一個名為 items 的回應式物件陣列，并在其內部嵌套了一個物件，該物件具有兩個屬性 name 和 checked，然后，使用 watch 函式來監聽陣列中所有物件的 checked 屬性的變化，并在回呼函式中遍歷陣列，檢查所有 checked 屬性的值是否發生變化，當發生變化時，列印一條訊息到控制臺，
二、監聽某個具體物件的特定屬性
如果需要監聽的是某個具體物件的屬性，可以使用物件的索引來訪問該物件的屬性，并使用該屬性作為 watch 函式的第一個引數進行監聽，例如：
import { ref, watch } from "vue";
export default {
setup() {
const items = ref([
{ name: "item1", checked: false },
{ name: "item2", checked: true },
{ name: "item3", checked: false },
]);
watch(
() => items.value[0].checked,
(newVal, oldVal) => {
console.log(`item1 checked changed from ${oldVal} to ${newVal}`);
}
);
return {
items,
};
},
};
在上面的例子中，使用 watch 函式來監聽陣列中第一個物件的 checked 屬性的變化，并在回呼函式中列印一條訊息到控制臺，
總之，使用 watch 函式和陣列的 map 函式或物件的索引可以很方便地監聽物件陣列中物件的特定屬性，并在變化發生時執行相應的操作，
作者：飛仔FeiZai
出處：https://www.cnblogs.com/yuzhihui/p/17337389.html
宣告：歡迎任何形式的轉載，但請務必注明出處！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550708.html
標籤：其他
上一篇：Module not found: Error: Package path 找不到模塊
下一篇：返回列表