Vue:【亲测可用】父组件数组包对象,传给子组件对象,子组件修改属性(字段)后,父组件没有更新

场景:vue中父组件数组包对象,传给子组件对象,子组件修改属性(字段)后,父组件没有更新

代码:

# 父组件
<div v-for="(object, name, index) in arr" :key="index">
  <子组件 v-model="object" />
</div>

假设:object={age:80, name: '张三'}

子组件修改 age属性值为 20,此时父组件是不会改变的,重启项目有可能还会报一下错误

You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object

解决如下:

# 父组件
<div v-for="(object, name, index) in arr" :key="index">
  <子组件 v-model="arr[index]" />
</div>

解析:区别在于 v-model="object"  变成了 v-model="arr[index]" 

完~

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】数据管理——DML操作数据

目录 DML&#xff08;数据操作语言&#xff09;添加数据插入单行语法插入多行语法SQL示例将查询结果插入到新表中语法1&#xff1a;语法2&#xff1a; 修改数据语法示例关于SQL的运算符算术运算符比较运算符逻辑运算符 案例 删除数据DELETE命令语法 TRUNCATE TABLE 命令语法代码…

宝塔FTP服务设置并结合cpolar内网穿透实现远程传输文件

文章目录 1. Linux安装Cpolar2. 创建FTP公网地址3. 宝塔FTP服务设置4. FTP服务远程连接小结 5. 固定FTP公网地址6. 固定FTP地址连接 宝塔FTP是宝塔面板中的一项功能&#xff0c;用于设置和管理FTP服务。通过宝塔FTP&#xff0c;用户可以创建FTP账号&#xff0c;配置FTP用户权限…

数据结构——lesson4带头双向循环链表实现

前言✨✨ &#x1f4a5;个人主页&#xff1a;大耳朵土土垚-CSDN博客 &#x1f4a5; 所属专栏&#xff1a;数据结构学习笔记​​​​​​ &#x1f4a5;双链表与单链表的区分&#xff1a;单链表介绍与实现 &#x1f4a5;对于malloc函数有疑问的:动态内存函数介绍 感谢大家的观看…

为什么推荐使用ref而不是reactive

为什么推荐使用ref而不是reactive 局限性问题&#xff1a; reactive本身存在一些局限性&#xff0c;可能会在开发过程中引发一些问题。这需要额外的注意力和处理&#xff0c;否则可能对开发造成麻烦。数据类型限制&#xff1a; reactive声明的数据类型仅限于对象&#xff0c;而…

RK3568 android11 调试陀螺仪模块 MPU6500

一&#xff0c;MPU6500功能介绍 1.简介 MPU6500是一款由TDK生产的运动/惯性传感器&#xff0c;属于惯性测量设备&#xff08;IMU&#xff09;的一种。MPU6500集成了3轴加速度计、3轴陀螺仪和一个板载数字运动处理器&#xff08;DMP&#xff09;&#xff0c;能够提供6轴的运动…

【毛毛讲书】【端粒:年轻、健康、长寿的新科学】是什么决定了我们的寿命?

重磅推荐专栏&#xff1a; 《大模型AIGC》 《课程大纲》 《知识星球》 本专栏致力于探索和讨论当今最前沿的技术趋势和应用领域&#xff0c;包括但不限于ChatGPT和Stable Diffusion等。我们将深入研究大型模型的开发和应用&#xff0c;以及与之相关的人工智能生成内容&#xff…

es获取某个索引下字段的分词结果

//查看某个索引下字段的分词结果 GET /haha/_analyze { "field": "title", "text":"哈哈。" }

云尚办公-0.1.0

二、用户管理接口 1. 建表 角色与用户是多对多的关系&#xff0c;所以除了角色表和用户表外&#xff0c;还需要第三张表表示这两者间的对应关系。关系表中的用户id和角色id分别以对应表中的id作为外键。 CREATE TABLE sys_user (id BIGINT(20) NOT NULL AUTO_INCREMENT COM…

Vue3切换路由白屏刷新后才显示页面内容

1.首先检查页面路由以及页面路径配置是否配置错误。 在router-view 中给路由添加key标识。 &#xff01;&#xff01;注意&#xff1a;有使用layout封装布局的&#xff0c;是在layout下的主页面中的 router-view 添加标识&#xff0c;不是在src根目录下main.vue中修改&#xf…

[云原生] K8s之pod进阶

一、pod的状态说明 &#xff08;1&#xff09;Pod 一直处于Pending状态 Pending状态意味着Pod的YAML文件已经提交给Kubernetes&#xff0c;API对象已经被创建并保存在Etcd当中。但是&#xff0c;这个Pod里有些容器因为某种原因而不能被顺利创建。比如&#xff0c;调度不成功(…

【rust】11、所有权

文章目录 一、背景二、Stack 和 Heap2.1 Stack2.2 Heap2.3 性能区别2.4 所有权和堆栈 三、所有权原则3.1 变量作用域3.2 String 类型示例 四、变量绑定背后的数据交互4.1 所有权转移4.1.1 基本类型: 拷贝, 不转移所有权4.1.2 分配在 Heap 的类型: 转移所有权 4.2 Clone(深拷贝)…

linux系统Jenkins的安装

Jenkins安装 安装上传安装包解压包首次登录要去服务器查看密码&#xff0c;更改密码选择需要安装的插件设置Admin用户和密码安装完成 安装 上传安装包 上传 jdk17 tomcat jenkins.war的安装包 . 上传 tomcat安装包解压包 解压jdk tar xf jdk-11.0.18_linux-x64_bin.tar.gz解…

甲级!亚信安全再次荣膺CNCERT国家级网络安全应急服务支撑单位称号

再获认可 近日&#xff0c;国家计算机网络应急技术处理协调中心&#xff08;CNCERT&#xff09;正式公布第十届CNCERT网络安全应急服务支撑单位遴选结果&#xff0c;亚信安全凭借创新技术实力&#xff0c;以及重大突发网络安全事件的应对能力&#xff0c;再次荣获CNCERT甲级网…

AI新秀Mistral:“Open AI“ 新时代

最近互联网出现不少类似“下一代openai”、“GPT-4最强竞品”、“法国AI独角兽”、“欧洲的OpenAI”、“微软新宠儿”.... 的文章&#xff0c;都会附带一张图片&#xff0c;就是下面这张&#xff1a; 那么到底发生了什么&#xff0c;出来个什么东西呢&#xff1f;就是本文的主…

深入英伟达盈利中心,反思一个正被“忽视”的Web3.0赛道

出品&#xff5c;欧科云链研究院 作者&#xff5c;Hedy Bi 最近&#xff0c;英伟达&#xff08;Nvidia&#xff09;发布了2023年第四季度财报&#xff0c;超出了华尔街预期&#xff0c;并在美国股市的延时交易中表现出色。欧科云链研究院通过分析英伟达的财报&#xff0c;我们…

前端架构: 脚手架包管理工具之lerna的全流程开发教程

Lerna 1 &#xff09;文档 Lerna 文档 https://www.npmjs.com/package/lernahttps://lerna.js.org [请直达这个链接] 使用 Lerna 帮助我们做包管理&#xff0c;并不复杂&#xff0c;中间常用的命令并不是很多这里是命令直达&#xff1a;https://lerna.js.org/docs/api-referen…

Unity 佳能SDK 及数据获取

1. 填写信息跟官方申请SDK,大概1-2个工作日会邮件回复你 佳能(中国)- 佳定制(佳能影像产品),SDK,EDSDK,CCAPI,软件开发包下载 2. 将SDK这两个文件放到 Unity Plugins文件夹 3. 把CameraControl 下面只要是绿色的 .cs 文件都复制到Unity 中

新闻网站封锁AI爬虫 AI与新闻媒体博弈继续

随着ChatGPT等新兴AI模型的兴起&#xff0c;它们所依赖的网络爬虫正面临来自全球主流新闻网站的大规模封锁。Richard Fletcher博士团队对十个国家主流新闻网站的统计发现&#xff0c;到2023年底&#xff0c;48%的网站屏蔽了OpenAI的爬虫&#xff0c;24%屏蔽了Google的爬虫。那么…

浅析前端的堆栈原理以及深浅拷贝原理

浅析前端的堆栈原理以及深浅拷贝原理 首先来看一个案例 const obj {name:hzw,age:18 } let objName2 obj objName2.age 12 console.log(obj,objName2) // {name: hzw, age: 12} {name: hzw, age: 12}这里是不是很奇怪&#xff0c;为什么&#xff0c;为什么我改变objName2的…

type may not be empty [type-empty]

Git提交失败原因分析 原因是使用了规范commit信息的工具&#xff0c;你的提交信息不符合规范&#xff0c;所以被拒绝了 commit规范工具 commitlinthusky 我这个项目使用husky&#xff0c;提交规范比较严格。 解决方式一&#xff1a; 修改提交信息&#xff0c; 使其符合规范…