vue.js中props,watch深度监听对象时,对象新增或者删除属性值时深度监听失效

2023-11-04

使用 deep 选项时,仅会监听对象内部现有属性值的改变,不会监听对象属性的增加或删除操作。

原因是,deep 选项仅能监听对象内部属性的改变,当对象新增或删除属性时,这些操作并不会触发属性内部变化引起的更新。

解决方案1:

this.obj = Object.assign({}, this.obj)
// 父组件值
data () {
    return {
        obj: {
            status: 0
        }
    }
}
 mounted () {
    setTimeout(() => {
      this.obj.refresh = 'refresh' 
      this.obj = Object.assign({}, this.obj) // 解决深度监听中失效的问题
    })
  }

// 子组件中深度监听即可见听到obj新增或者删除属性值
  watch: {
    // 深度监听搜索条件参数变化
    obj: {
      handler (newValue) {
        console.log(newValue, 'newValue obj')
      },
      deep: true // 深度监听
    }
  },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue.js中props,watch深度监听对象时,对象新增或者删除属性值时深度监听失效 的相关文章

  • Vue.js - 如何删除 hashbang #!来自网址?

    如何删除哈希爆炸 来自网址 我在 vue 路由器文档中找到了禁用 hashbang 的选项 http vuejs github io vue router en options html http vuejs github io vue r
  • @apply 在 Laravel Mix 中的 Vue 组件内不起作用

    我在 Laravel 中使用 Tailwind CSS 和 VueJS 组件 如下所示
  • 如何将类型添加到 Vite 库构建中?

    我按照vite文档使用图书馆模式 https vitejs dev guide build html library mode我能够生成一个工作组件库 我创建了该项目vue ts预设 在我的组件中 我定义了道具及其类型 并使用了一些接口 但
  • 我正在尝试向我的 vue.js 项目添加背景图像

    我想添加覆盖整个页面的背景图像 然而现在看起来是这样的 我希望它跨越整个网页 在 vue js 中这将如何完成 我还想要一个动画工具栏 以便当页面不滚动时工具栏是透明的并呈现背景图像的外观 当它滚动时 工具栏将具有当前的蓝色 这是我的小提琴
  • 如何在 Laravel 5.4 中加载 Vue 组件?

    我已经运行 npm run watch 并收到了消息 This dependency was not found in resources assets js app js To install it you can run npm ins
  • 如何判断何时创建新组件?

    我一直在寻找背后的逻辑当有人在 AngularJS Angular 上的 Web 应用程序中创建新组件时但我认为这更通用 可能适用于所有基于组件的前端框架 我知道有像这样的一些原则应该是抽象的和可重用的但例如我在角度文档中看到 每个单独的路
  • 如何将类型设置为 vue slot props Typescript

    我正在尝试在插槽道具上设置类型以在表格组件中进行处理 如图所示 我也一直在尝试 body item UserItem 但这只是重命名参数 body
  • 如何在Vue.js中格式化当前日期格式

    我需要获取当前日期Vue js 为此 我使用了以下方法 today date new Date toJSON slice 0 10 replace g today date将给出日期2019 09 11格式 有什么方法可以自定义这种格式吗
  • 在 Angular 中使用 Vue 组件

    我有一个用 Vue 构建的项目 我想在 Angular 应用程序中重用 Vue 应用程序中的组件 这样我就不必从头开始重建每个组件 我在medium上看到了这个教程 如何在 Angular 应用程序中使用 Vue 2 0 组件 https
  • 监听来自动态vue组件的事件

    您将如何侦听动态创建的组件实例发出的事件 在示例中 顶部组件添加到 DOM 中 而第二个组件是在 javascript 中动态创建的 Vue component button counter data function return cou
  • 如何切换各个
  • 元素的类?
  • 当我切换变量时active在下面的代码中 activeCSS 类应用于列表中的所有元素 从列表中的所有元素中删除 如何单独定位列表元素 Todo List 示例具有类似的功能 待办事项 待办事项已完成 但它有点超出了我的技能范围 ul li
  • v-file-input .click() 不是函数

    我试图以编程方式触发 v file input 的 click 事件 因为它在 Vuetify 的文档中 但它显示一个错误this refs imagePicker click is not a function我在这里错过了什么吗 代码重
  • Vue.js - 以编程方式设置槽内容

    有什么办法可以从组件内部设置 覆盖插槽的内容吗 喜欢 模板 div div
  • 无法通过 Vue.js 从 Laravel 后端下载文件 (pdf)(Axios 帖子)

    我在 Vue 中有一个多步骤表单 一旦收集到所有信息 我就会将结果发布到 Laravel 控制器 这是网站的经过验证的区域 我正在使用护照 所以本质上我有一个 Vue SPA 它是在 Laravel 5 7 框架内构建的网站的管理区域 Vu
  • 如何在 vuelidate 验证中使用条件运算符?

    我刚刚安装维埃利达特 https www npmjs com package vuelidate 并创建了一个助手来检查该值是否为phone no 参考 https vuelidate js org sub list of helpers
  • 如何从vuejs和firestore获取文档的id?

    我有这个代码可以从 firestore 获取所有文档 const getThemesList async commit gt const snapshot await firebase firestore collection themes
  • 如何使用 vue 观察对象数组中的特定属性

    我正在使用 vue js 2 5 2 我有一个对象数组 我想观察 forms selected 如果它发生变化 则调用一个函数 这是我的尝试 但显然这是不正确的 我尝试将数组放入 for 循环中以观察所选的每个对象的属性 watch for
  • 在 Vue SFC 组件中导入 SCSS 文件,无需使用 Webpack 进行重复

    当我尝试访问所有 Vue SFC 中的 scss 文件时 样式会重复 导致大型 css 包和开发工具在样式调试时崩溃 我正在使用 Webpack 4 和 webpack dev server 来构建和运行具有热重载的开发服务 我没有使用 V
  • 如何为 VueJS 组件创建 v-model 修饰符?

    在VueJS中有一些v model修改预解析绑定值 例如v model trim从字符串中删除空格 如何创建自己的修改器 例如v model myparse今天嗯使用类似的东西 computed name get function retu
  • 如何居中对齐表格 - PDFMAKE

    我可以使用 PDFMAKE 创建一张居中对齐 页面 的表格吗 已定义的对齐方式 样式中的 center 和标签表内的 table width auto body text PER ODO style tableHeader text VOL

随机推荐

  • ios-常见的命令行工具

    pwd 查看当前目录 cat 在命令行中查看文件 ls 查看文件 ls l 就是以列表的形式展开 touch 创建文件 open 打开文件 more 分页查看文件内容 f是下一页 b是上一页 当你命令行有很多东西你写错了的时候不想去一一删除
  • 视频转为GIF上传

    下载地址 https en softonic com download licecap windows post download 这里是没有直接上传视频的入口的 但是有上传gif png等图片格式的入口 这里我们需要将上传的gif通过本地
  • 键盘数字测试软件,KeyboardTest(键盘测试工具)官方版

    KeyboardTest 键盘测试工具 简介KeyboardTest 键盘测试工具 是可以放心付诸时间的系统软件软件 下载尝试过这款KeyboardTest 键盘测试工具 2021 05 12 这款软件免费吗 好像这一类软件都有个自带广告
  • linux下各文件夹的结构说明及作用

    根目录下的文件夹 1 bin 目录 bin 目录包含了引导启动所需的命令或普通用户可能用的命令 可能在引导启动后 这些命令都是二进制文件的可执行程序 bin 是 binary 的简称 多是系统中重要的系统文件 2 boot 目录 boot
  • 4. Python的流程控制

    Hi 大家好 我是茶桁 在前面几节课的基础之上 我们今天开始尝试在Python中控制流程 这中间 让我们来做一些实际的练习 Python语句的分类 让我们先了解一下Python语句的分类 在Python中 可分为单行代码和代码块 组 顾名思
  • 激活函数(4)tanh函数

    tanh函数 双曲正切激活函数 函数解析式 tanh函数及其导数的几何图像如下图 tanh读作Hyperbolic Tangent 它解决了Sigmoid函数的不是zero centered输出问题 然而 梯度消失 gradient van
  • html 替换多选框和单选框默认的按钮

    div class 113 div
  • 如何学习html?

    怎么学习html 本文为html初学者介绍一些高效率的html学习办法 以及推荐一些不错的HTML学习资源给我们 希望能帮助到我们 怎么学习html html即超文本标记语言 现在大部分网页都是html格式 html代码也是一切编程语言中学
  • vim后,/要搜索字段,n(查找)

    vim后 要搜索字段 回车 n 查找
  • 测试测试测试

    目录 标题 标题 测试
  • Mysql索引

    1 什么是索引 索引是帮助MySQL高效获取数据的数据结构 2 索引的分类 单列索引 1 普通索引 mysql中的普通索引 允许插入重复值和null值 没有什么限制 纯粹为了查询快一点 2 唯一索引 索引中的列必须是唯一的 可以为null值
  • oracle 不带时分秒,关于Oracle数据库不带日期中时分秒的查询

    关于Oralce数据库 的日期时间查询 下面我们先来看一组日期数据 表 myDate 列 time 1998 8 7 23 45 33 3 1998 8 7 11 22 21 5 1998 8 7 00 00 00 0 上面列出的这组日期数
  • 50-00-010-配置-kylin-2.6.0官网配置

    文章目录 1 视界 1 Kylin 配置 2 配置文件及参数重写 3 Kylin 配置文件 配置重写 项目级别配置重写 Cube 级别配置重写 MapReduce 任务配置重写 Hive 任务配置重写 Spark 任务配置重写 部署配置 部
  • linux下部分文件管理类基本命令汇总以及bash展开特性介绍

    一 文件管理类基本命令 1 1 表格汇总 今天要讲解的命令如下表所示 按照外部命令和内建命令做基本划分 内建命令列表 命令名字 基本说明 file 检测文件类型 cd 改变shell的工作目录 dirs 显示目录堆栈信息 popd 从堆栈中
  • macOS_Monterey_12.6_21G115可引导可虚拟机安装的纯净版苹果OS系统ISO镜像安装包免费下载

    现在网络上黑果系统出现了许多多合一的多功能版 不是说这些版本不好 只是小编个人觉得 操作系统就是用来使用的 黑果本来就是服务于一些非苹果机的苹果OS爱好者的 简洁稳定应该是首选 固小编毅然放弃那些多功能的豪华版镜像版 独宠我的纯净可引导安装
  • pyqt5重温入门教程:用Qt Designer设计UI

    程序员今晚不回家 抖音号 在开始教程之前 先简单地水几句 之前使用过pyqt5 但是好久没用了 现在因为有一个项目需要 所以在此重温一下 当然教程就不是像零基础那样手把手从安装开始了 这里简洁明了 直接上手操作 第一步 打开Designer
  • 某宝sign参数逆向分析

    说明 淘宝ajax获取数据的方式为jsonp请求 所以在chrome中使用xhr拦截请求中加密参数的方式拦截不到 解决办法 目前我使用的方法是 添加DOM断点的方法去监听页面元素的变化 同时使用charles去监听页面发送的请求 后面就是一
  • 简单粗暴而又很有效果的图片无损放大方法

    工作生活中我们都会碰到想要对图片进行无损放大的情况 比如说做电子相册视频啦 做PPT啦 做设计啦等等等等 但是我们又没有那么专业的技术 PS也能试着操作一下 但始终没法弄能自己想要的效果 我们该如何对图片进行快速的无损放大呢 用PhotoZ
  • uart_linux

    写串口程序 include
  • vue.js中props,watch深度监听对象时,对象新增或者删除属性值时深度监听失效

    使用 deep 选项时 仅会监听对象内部现有属性值的改变 不会监听对象属性的增加或删除操作 原因是 deep 选项仅能监听对象内部属性的改变 当对象新增或删除属性时 这些操作并不会触发属性内部变化引起的更新 解决方案1 this obj O