码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 数组对象数据修改后页面没有更新,无法进行编辑,校验失效问题


    在 Vue 中,当你通过 Object.assign 或其他方式修改了对象中的某个属性时,Vue 并不会触发组件重新渲染,因此表单中的 input 框无法及时更新。这可能导致在修改表单数据后,页面没有更新,而且表单校验也失效的情况。这是因为 Vue 的响应式系统是基于对象的引用来触发更新的,简单的赋值并不会触发视图的重新渲染。
    为了解决这个问题,你可以通过以下方式更新数据:

    1.使用 Vue.set() 方法:当你需要在已有对象上新增属性时,可以使用 Vue.set() 方法:

       Vue.set(this.valueData, index, Object.assign({}, res.data.data));


    2.使用 Vue 的 $set() 方法:$set() 是 Vue 实例的方法,用于设置对象的属性值。示例代码如下:

       this.$set(this.valueData, index, Object.assign({}, res.data.data));

    这样做可以确保 Vue 监测到数据的变化,并触发重新渲染页面,使得表单可以正确显示和校验。
    另外,你也可以在修改数据后手动调用 $forceUpdate() 方法强制更新组件,但这不是 Vue 推荐的做法,因为不够优雅且效率较低。
    总结:为了确保 Vue 在修改数据后可以正确更新视图和保持表单校验的有效性,需要使用 Vue 提供的方法来触发响应式更新。

  • 相关阅读:
    AD19原理图绘制_学习笔记
    Mac 苹果系统使用nvm use 切换node版本号
    【芯片驱动】SMG42630的固定步数实现
    Geode多节点集群实验
    Leetcode99. 恢复二叉搜索树
    navicate安装教程
    Oracle数据库SQL优化详解
    03 卷积操作图片
    解决微软活动目录管理工作中常见问题
    RK3588平台开发系列讲解(安卓篇)Android12 获取 root 权限
  • 原文地址:https://blog.csdn.net/qq_45754184/article/details/139445693
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号