Vue3 watch 监听对象数组中对象的特定属性

news/2024/10/30 9:36:02/

在 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 的响应式对象数组,并在其内部嵌套了一个对象,该对象具有两个属性 namechecked。然后,使用 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 函数或对象的索引可以很方便地监听对象数组中对象的特定属性,并在变化发生时执行相应的操作。


http://www.ppmy.cn/news/62876.html

相关文章

欧科云链OKLink:2023年4月安全事件盘点

一、基本信息 2023年4月安全事件共造约6000万美金的损失,与上个月相比,损失金额有所降落,但安全事件数量依旧不减。其中,Yearn Finance因参数配置错误,导致了1000多万美金的损失。同时,有一些已经出现过的…

platform总线五级匹配解析

代码来源:开源linux内核linux-6.2.9 platform总线设备与驱动的匹配 对于device和driver无论哪个创建都会尝试主动寻找对方进行绑定,而platform bus总线的匹配原则如上面的代码所示,共有五级匹配,这里进行详细解析下: …

CSAPP第九章 虚拟内存

概述 程序是存放在虚拟地址空间中,运行是在物理空间中,如何进行转换是虚拟内存需要研究的问题。 完成逻辑地址到虚拟地址再从虚拟地址到逻辑地址映射的机构叫MMU 两个部件 段式管理和页式管理 之前有提到,cache的管理是通过cache映射表&…

SIM800C模块AT指令测试(三)语音功能相关

1. 紧急呼叫操作 每个国家区域的紧急号码不同,客户可通过AT指令设置需要的号码,最多可以设置11个。 ATCEMNL? CEMNL: (0-1),(1-11),("0"-"999")... OK ATCEMNL1,3,“112”,“000”,“911” // 设置紧急号码 OK AT…

块状链表实现BigString大字符串操作(golang)

前言 块状链表是介于链表和数组之间的数据结构,能够在 O ( n ) O(\sqrt{n}) O(n ​)时间内完成插入、删除、访问操作。 数据结构如图所示。假设最大容量为 n n n, 则它有一个长度为 s n s\sqrt{n} sn ​的链表。链表中每个结点是一个长度为 2 n 2 \times \sqrt{…

配置本地Angular环境并使用VsCode调试Angular前端项目

配置本地Angular环境并使用VsCode调试Angular前端项目 配置本地Angular环境部署Node.Js本地环境配置一下环境变量 使用vscode调试Angular安装vscode 配置本地Angular环境 部署Node.Js本地环境 1 从官网下载node.js, 本文为(v16.13.0) 下载地址: https://nodejs.org/dist/v16.…

硬件设计 之 PCIe常用知识

以下是本人在自己在设计PCIe中常遇到的一些知识,对他们进行了简单整理一下,包括基本定义、传输速率、layout要求等。比如作为硬件工程师要了解芯片架构,哪些PCIe接口可以使用,使用这些PCIe要做什么,需要使用PCIe x1还是…

GRPC - JAVA笔记

GRPC - JAVA笔记 gRPC简介 由google开源的一个高性能的RPc框架,由google内部的Stubby框架演化而来。2015年正式开源。云原生时代的RPC标准,由Go语言开发 gRPC的核心设计思路 网络通信 ------> gRPC 自己封装了网络通信的部分,提供了多种…