Vue表单项赋值后无法输入问题解决

问题背景

  • 打开编辑页Form表单时,从后台接口获取已有数据并赋值到对应的输入框中,并通过v-model对数据进行绑定,会导致输入框输入无效的状态,且无报错信息
    问题分析
  1. Vue可以检测data中属性property的变化,但是不能直接检测数组、对象的变化
  2. 直接存在于data中的property可以检测并响应,但是后续定义并赋值property的无法检测
// data
return {form: {}
}
// methods
getForm(res) {this.form = res.data
}

解决方法

  1. 通过forceUpdate强制更新,但是需要每个输入框都加(不推荐
  2. 赋值时通过扩展运算符…将源对象拷贝到目标对象(或者Object.assign等),表单中的控件会保持响应式,可以进行修改(推荐
this.form = {...res.data}

原理拓展

  1. 为什么不能直接使用=给对象赋值
    • 在 Vue 中使用 v-model 将输入框与 form 对象的属性绑定时,Vue 会在内部为这些属性创建 getter 和 setter。这些 getter 和 setter 负责监听属性的变化并通知 Vue 响应式系统。这样,当输入框的值改变时,Vue 将自动更新相关的视图。
    • 然而,如果直接给 form 对象赋一个新的对象,Vue 就无法检测到对象的属性变化,因为此时 Vue 只是将新对象赋给了原来的引用,而不是修改了对象的属性。这就导致了输入框无法输入的问题,因为 Vue 没有监听到 form 对象的变化。
    • 使用 Object.assign() 或扩展运算符 ... 可以解决这个问题的原因在于它们都是在修改原对象的基础上进行的。虽然它们看起来像是将一个新的对象赋给了 form,但实际上是在原对象的基础上修改了属性。这样做会触发 Vue 的响应式系统,因为 Vue 会检测到属性的变化并更新视图。
  2. 可以使用深拷贝吗,有必要吗?
    • 可以使用深拷贝解决问题
    • 但是深拷贝并不是必要的,因为只需要确保更新对象的属性而不是整个对象。深拷贝会创建一个新的对象,这可能会导致性能开销较大,并且在大型对象上可能会引起不必要的复杂性。
    • 使用深拷贝虽然可以解决问题,但并不是最佳选择。相反,使用浅拷贝方法如 Object.assign() 或扩展运算符能够更有效地实现我们的目标,而且更符合这种情况的需求。
  3. JS直接赋值和浅拷贝的区别
    • 赋值,将一个对象赋值给一个新的对象的时候,赋的其实是该对象在栈中的地址,而不是堆中的数据。也就是一个对象的改变就会改变另外一个对象。
    • 浅拷贝,浅拷贝会创建一个对象,再去遍历原始对象,如果原对象的属性值是基础类型,那么就拷贝基础类型,如果是引用类型,则拷贝的是指针。

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

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

相关文章

vue2 + antvx6 实现流程图功能

导入关键包 npm install antv/x6 --save npm install antv/x6-vue-shape 保存插件 (可选) npm install --save antv/x6-plugin-clipboard antv/x6-plugin-history antv/x6-plugin-keyboard antv/x6-plugin-selection antv/x6-plugin-snapline antv/x6-plugin-stencil antv/…

windows上通过定时任务提交新增文件到SVN(bat双击可执行,但是通过定时任务后无法提交到svn)

这个要必须记录一下了,因为折腾了蛮久断断续续加起来花费的有一天多时间。因为这个跟上篇定时备份是一个事来的,备份完了不可能留在跟数据库相同的机器吧,这样的话也起不到备份的作用啊,所以就想着让它每天去定时备份,…

Web安全研究(七)

NDSS 2023 开源地址:https://github.com/bfpmeasurementgithub/browser-fingeprint-measurement 霍普金斯大学 文章结构 introbackground threat model measurement methodology step1: traffic analysisstep2: fingerprint analysis dataset attack statisticsbro…

【EI会议|稳定检索】2024年传感技术与图像处理国际会议(ICSTIP 2024)

2024 International Conference on Sensing Technology and Image Processing 一、大会信息 会议名称:2024年传感技术与图像处理国际会议会议简称:ICSTIP 2024收录检索:提交Ei Compendex,CPCI,CNKI,Google Scholar等会议官网:htt…

nginx变量自定义日志收集

内置变量 $remote_addr;存放了客户端的地址,注意是客户端的公网IP,也就是一家人访问一个网站,则会显示为路由器的公网IP。 $args;变量中存放了URL中的指令 [rootlocalhost conf.d]# cat pc.conf server {listen 80;se…

C++20:方向之争 C++20 特性 模块 协程 无栈协程 编译期 计算支持 静态反射 模式匹配

C++20:方向之争 C++20作为C++语言的一个新标准,带来了许多新的特性和改进,同时也引发了一些关于发展方向的争议。这些争议主要集中在如何平衡语言的复杂性、性能、易用性以及与其他编程语言和技术的集成等方面。 首先,C++20引入了一些新的语言特性和库,如concepts(概念…

推荐系统的技术栈

推荐系统的技术栈 推荐系统是一个非常大的框架,有非常多的模块在里面,完整的一套推荐系统体系里,不仅会涉及到推荐算法工程师、后台开发工程师、数据挖掘/分析工程师、NLP/CV工程师还有前端、客户端甚至产品、运营等支持。我们作为算法工程师…

调教AI给我写了一个KD树的算法

我不擅长C,但是目前需要用C写一个KD树的算法。首先我有一份点云数据,需要找给定坐标范围0.1mm内的所有点。 于是我开始问AI,他一开始给的答案,完全是错误的,但是我一步步给出反馈,告诉他的问题,…

nuxt3使用记录六:禁用莫名其妙的Tailwind CSS(html文件大大减小)

发现这个问题是因为,今天我突然很好奇,我发现之前构建的自动产生的200.html和404.html足足290k,怎么这么大呢?不是很占用我带宽? 一个啥东西都没有的静态页面,凭啥这么大!所以我就想着手动把他…

ThinkPHP--5.0.23-rce远程代码执行

一、漏洞原理 实现框架的核心类Requests的method方法实现表单请求类伪装,默认为$_POST[‘_method’]变量,却没有对_method属性进行严格校验,可以通过变量覆盖Requests类的属性,在结合框架特性实现对任意函数的调用实现任意代码执…

Linux shell编程学习笔记48:touch命令

0 前言 touch是csdn技能树Linux基础练习题中最常见的一条命令,这次我们就来研究它的功能和用法。 1. touch命令的功能、格式和选项说明 我们可以使用命令 touch --help 来查看touch命令的帮助信息。 purpleEndurer bash ~ $ touch --help Usage: touch [OPTION]…

idm线程怎么设置 idm线程数怎么上不去 idm免安装

IDM(Internet Download Manager)是一款流行的下载管理软件,IDM采用高级的多线程下载技术,可以将下载文件分成多个部分同时下载,从而提高下载速度,它因高效的下载速度和丰富的功能而受到用户的喜爱。接下来&…

MVC和DDD的贫血和充血模型对比

文章目录 架构区别MVC三层架构DDD四层架构 贫血模型代码示例 充血模型代码示例 架构区别 MVC三层架构 MVC三层架构是软件工程中的一种设计模式,它将软件系统分为 模型(Model)、视图(View)和控制器(Contro…

一个5000刀的XSS

背景介绍 今天分享国外一个白帽小哥Crypto通过发现Apple某网站XSS而获得5000美元赏金的故事。废话不多说,让我们开始吧~ 狩猎过程 易受攻击的 Apple 服务网站是:https://discussions.apple.com,该服务是苹果用户和开发者讨论问题…

JavaScript的数据类型转换

转化为string类型: 方法说明转换对象.tostring()转换成字符串string(转换对象)转换成字符串加号拼接字符串和字符串拼接后的结果是字符串 转化为数字性: 方法说明parselnt(string&#xff…

Python 正则表达式2 语法基础

内容概述 正则表达式是由普通字符(例如"a",“b”,“c"等)以及特殊字符(例如”“,”-“,”^"等)组成的文字模式。举个例子,[a-z]这个正则表达式就代表了匹配所有的小写字母(“a”,“b”,“c”,…,…

这是一个简单网站,后续还会更新

1、首页效果图 代码 <!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <title>爱德照明网站首页</title> <style> /*外部样式*/ charset "utf-8"…

什么是Vue的单文件组件(SFC)

Vue的单文件组件&#xff08;Single File Components&#xff0c;简称SFC&#xff09;是Vue.js框架中用来组织和编写组件的一种文件格式。简单来说&#xff0c;一个.vue文件就是一个单独的组件&#xff0c;它封装了组件的HTML模板、CSS样式和JavaScript逻辑。这种开发方式有助于…

Luminar开始为沃尔沃生产下一代激光雷达传感器

在自动驾驶技术的浪潮中&#xff0c;激光雷达&#xff08;LiDAR&#xff09;传感器以其高精度和强大的环境感知能力&#xff0c;逐渐成为了该领域的技术之星。Luminar&#xff08;路安达&#xff09;公司作为自动驾驶技术的领军企业&#xff0c;近日宣布已开始为沃尔沃汽车生产…

MySQL-笔记-08.数据库编程

目录 8.1 编程基础 8.1.1 基本语法 8.1.2 运算符与表达式 1. 标识符 2. 常量 &#xff08;1&#xff09; 字符串常量 &#xff08;2&#xff09;日期时间常量 &#xff08;3&#xff09;数值常量 &#xff08;4&#xff09;布尔值常量 &#xff08;5&#xff09;NULL…