vue监听对象属性值变化

一、官方文档

二、实现方法

方法一、直接根据watch来监听

export default {data() {return {object: {username: '',password: ''}}},watch: {'object.username'(newVal, oldVal) {console.log(newVal, oldVal)}}
}

方法二:利用watchcomputed来实现监听

利用computed定义一个新属性,新属性使用object里面的某个属性值,再使用watch来监听这个新属性值。

export default {data() {return {object: {username: '',password: ''}}},computed: {username() {return this.object.username}},watch: {username(newVal, oldVal) {console.log(newVal, oldVal)}}
}

方法三:利用对象属性的deep = true来实现

只要对象属性里面的任何一个属性值发生改变,不论嵌套的多深,都会触发监听里面的handler方法。

注意:如果是一个数组对象ArrayObject,也要加deep,如果该属性是一个数组Array,则不需要加deep

export default {data() {return {object: {username: '',password: ''}array: ['1', '2'],arrayObject: [{id: 1,name: '1'}{id: 2,name: '2'}]}},watch: {object: {deep: true,handler(newVal, oldVal) {//newVal和oldVal会包含formData里面的每一个属性值console.log(newVal, oldVal)}},array: {handler(newVal, oldVal) {//newVal和oldVal会包含formData里面的每一个属性值console.log(newVal, oldVal)}},arrayObject: {deep: true,handler(newVal, oldVal) {//newVal和oldVal会包含formData里面的每一个属性值console.log(newVal, oldVal)}}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/188874.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springcloud新闻发布系统源码

开发技术: jdk1.8,mysql5.7,nodejs,idea,vscode springcloud springboot mybatis vue elementui 功能介绍: 用户端: 登录注册 首页显示搜索新闻,新闻分类,新闻列表…

我的 2023 秋招总结,拿到了大厂offer

2023秋招小结 前言 & 介绍 作为2024年毕业的学生,在2023年也就是今年秋招。 现在秋招快结束了,人生可能没有几次秋招的机会(应该就一次,最多两次吧哈哈),也有一点感悟,所以小小总结一下。…

音频类型转换工具-可执行文件exe/dmg制作

朋友车载音乐需要MP3格式,想要个批量转换工具 准备工作 brew install ffmpeg --HEAD或者官网下载安装ffmpeg并配置环境conda install ffmpeg 或者pip install ffmpeg-python 音频类型转换程序.py文件 exe文件在windows下打包,dmg在macos下打包&#…

quickapp_快应用_tabBar

tabBar 配置项中配置tabBar(版本兼容)使用tabs组件配置tabBar语法示例问题-切换tab没有反应问题-数据渲染问题解决优化 问题-tab的动态配置 第三方组件tabbar 一般首页都会显示几个tab用于进行页面切换,以下是几种tab配置方式。 配置项中配置tabBar(版本兼容) 在m…

C语言一个奇奇怪怪的小细节(定制初始化中的一个坑)

在今天写C代码的过程中,发现了一个奇怪的现象: 假设我们有如下数据结构: struct AddressMapping {u64 lba;union{u64 addr;u64 addrPage;struct ScatterIter sgiter;};u64 size; }__attribute__ ((__packed__));struct ScatterIter{struct Sc…

一文看分布式锁

为什么会存在分布式锁? 经典场景-扣库存,多人去同时购买一件商品,首先会查询判断是否有剩余,如果有进行购买并扣减库存,没有提示库存不足。假如现在仅存有一件商品,3人同时购买,三个线程同时执…

最新自动定位版本付费进群系统源码

更新内容: 1.在网站首页增加了付款轮播功能。 2.新增了城市定位功能,方便用户查找所在城市的相关信息。 3.对域名库及支付设置进行了更新和优化。 4.增加了一种图模板设置模式,简化了后台模板设置流程。 5.此外还进行了前后台的其他优化…

ClickHouse的分片和副本

1.副本 副本的目的主要是保障数据的高可用性,即使一台ClickHouse节点宕机,那么也可以从其他服务器获得相同的数据。 Data Replication | ClickHouse Docs 1.1 副本写入流程 1.2 配置步骤 (1)启动zookeeper集群 (2&…

【蓝桥杯省赛真题01】C++水下探测器 第十届蓝桥杯中小学生创意编程大赛C++编程比赛省赛真题解析

目录 C/C++水下探测器 一、题目要求 1、编程实现 2、输入输出 二、算法分析

uniapp-轮播图点击预览功能

实现效果 点击后打开预览图 实现代码 <swiper v-if"this.bannerList.length > 1" class"swiper" autoplay"true" duration"500" interval"2000" change"changeSwiper"><swiper-item class"swip…

WordPress网站迁移实战经验

前几日,网站服务器到期,换了服务商,就把我的WordPress的网站迁移到本地电脑了。方便以后文章迁移。 本次迁移网站主要经历以下几个步骤。 1.域名转出。 2.备份数据库及网站文件下载。 3.重新搭建WordPress网站。 4.网站文件及数据库导入。 下面详细介绍下每个步骤的操作…

一些RLHF的平替汇总

卷友们好&#xff0c;我是rumor。 众所周知&#xff0c;RLHF十分玄学且令人望而却步。我听过有的小道消息说提升很大&#xff0c;也有小道消息说效果不明显&#xff0c;究其根本还是系统链路太长自由度太高&#xff0c;不像SFT一样可以通过数据配比、prompt、有限的超参数来可控…