vue3中reactive数据被重新赋值后无法双向绑定,使用reactive包裹数组如何正确赋值?
需求:将接口请求到的列表数据赋值给响应数据arr
const arr = reactive([]); const load = () => {
const res = [2, 3, 4, 5]; //假设请求接口返回的数据
// 方法1 失败,直接赋值丢失了响应性
// arr = res;
// 方法2 这样也是失败
// arr.concat(res);
// 方法3 可以,但是很麻烦
res.forEach(e => {
arr.push(e);
});
};
vue3使用proxy,对于对象和数组都不能直接整个赋值。
使用方法1能理解,直接赋值给用reactive包裹的对象也不能这么做。
这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发
推荐第一种!
引自:
https://segmentfault.com/q/1010000038701322;
https://gudujian.blog.csdn.net/article/details/121961031
vue3中reactive数据被重新赋值后无法双向绑定,使用reactive包裹数组如何正确赋值?的更多相关文章
- vue 中contenteditable="true"添加可编辑属性后v-model双向绑定失效的解决办法
在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效解决方法如下,亲测好用(v-html和@blur实现 ...
- 某些时候 v-if 会导致 v-modal 内部数据获取不到 也watch不到,这个时候用v-show即可,另外提一下数组要整体赋值才有双向绑定
某些时候 v-if 会导致 v-modal 内部数据获取不到 也watch不到,这个时候用v-show即可,另外提一下数组要整体赋值才有双向绑定
- asp.net中UpdatePanel数据加载成功后回调
//添加UpdatePanel加载成功后执行的js方法 Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(onPageLoade ...
- C# 过滤字典中的数据 并将过滤后的数据转成新的字典对象
Dictionary<string, object> dic = new Dictionary<string, object>(); dic.Add("); dic. ...
- 关于vue.js中v-model与表单控件的双向绑定。
单选框:<input type="checkbox" id="checkbox" v-model="checked"><l ...
- 如何在原生微信小程序中实现数据双向绑定
官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...
- Vue6——v-model实现数据双向绑定
博客地址 :https://www.cnblogs.com/sandraryan/ v-model 用于input标签,用于实现双向绑定,及时把数据的变化渲染在页面 双向绑定及原理 举个双向绑定的简单 ...
- 关于Vue中,checkBox等组件在赋值后,点击切换页面未及时更新问题
我们经常碰到这样的问题,在v-for循环中,给某些组件(此处以checkBox为例)赋值后,组件并不能正常切换, 这是因为数据层太多,render函数没有自动更新,需手动强制刷新. 解决方法:在切换c ...
- 解决Vue中文本输入框v-model双向绑定后数据不显示的问题
前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...
- vue3中使用axios如何去请求数据
在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...
随机推荐
- 聊聊web漏洞挖掘第一期
之前写2022年度总结的时候,有提到要给大家分享漏洞挖掘技巧.这里简单分享一些思路,更多的内容需要大家举一反三. 文章准备昨晚写的,昨天晚上出去唱歌,回来太晚了,耽搁了.昨天是我工作的last day ...
- C#/VB.NET 在Excel中添加水印
在工作中,为了防止文件被随意复制和传播,通常我们会选择在文档中添加水印来对文件进行有效保护.文字水印是比较常见的一种保护手段,它可以有效防止文件被任意复制和随意打印传播.不过,Excel默认并没有水印 ...
- Ubuntu 22.04 运行 Appimage 文件
解决方法 sudo apt-get update sudo apt install fuse libfuse2 chmod a+x *.appimage 参考资料 https://bynss.com/ ...
- Flutter新版本2.X系列--01创建项目
1.新建项目,打开Android studio,点击红圈部分 2.选择第一个 3.设置你的项目名称,flutter sdk位置,以及项目存储路径 4.设置包名,这个要唯一 5.好啦 ~ 作为一名前端开 ...
- angular打包出现JavaScript堆内存不足、启动也会内存溢出解决办法\increase-memory-limit' 不是内部或外部命令,
## 打包出现JavaScript堆内存不足 最近打包遇到这种报错 Ineffective mark-compacts near heap limit Allocation failed - Java ...
- 基于AS2协议的EDI 系统
一款由JAVA语言开发的基于AS2 协议的EDI 轻量级系统 优点如下: 1.价格便宜.目前市场上一条gateway线路动辄数万,甚至数万/年. 2.功能强大.功能可以与主流EDI 软件媲美. 3.可 ...
- ATM购物车大作业
项目开发流程 1.需求分析:品经理与架构师,根据客户的需求,理出一套比较容易编写的流程 2.架构设计:架构师根据具体的业务需求选择 具体的开发编程语言与项目框架,所需要的数据库(主库,从库).与开发目 ...
- 简单了解C语言如何构建多文件项目
简单理解C语言如何构建工程 首先我们最好有一个好用的编辑器,vscode也好,visual studio也罢,dev也行,这里我们使用的是code::block: 一.了解C语言工程的构建原理 首 ...
- 编写antd的Cascader 级联选择组件市级地区数据
下面是该组件的使用数据的格式 options: [ { value: 'zhejiang', label: 'Zhejiang', children: [ { value: 'hangzhou', l ...
- 微信小程序使用vant组件样式不生效的问题
下面提供几个解决方案 方案一: 官方文档有说明,将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖, ...