【bug】vue内对象数组无法修改值并且直接复制也无法读取和修改值

最新推荐文章于 2024-11-05 17:30:00 发布
原创 最新推荐文章于 2024-11-05 17:30:00 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js

本文详细解析了Vue框架中对于数组和对象进行响应式修改的正确方法，包括使用this.$set方法更新数组元素，以及通过深拷贝创建新数组来避免getter和setter缺失的问题。

直接修改

由于vue机制的原因，this.arr[0]=5这样的单个修改是无效的，应该用以下方法修改

this.$set(this.arr,[index],[value])

如果是对象数组等比较复杂的，可以复制一个新数组再处理

复制数组

由于vue机制的原因，直接let arr1=this.arr，数组内的对象没有getter和setter。
正确方法：

  1. 用es6let arr1=[...this.arr] 或者let [...arr1]=this.arr
  2. let arr1 = thia.arr.concat()
lorogy
关注
关于Vue 编辑/保存后，页面数据不更新的问题
News777的博客
06-10 2094
编辑页面采用Element UI 的el-dialog 组件封装起来，点击修改按钮后异步调用接口，完成后用$emit 让父组件重新调用查询数据接口
探讨 Vue 3 响应式系统中，数组的 `Proxy` 拦截如何处理 `length` 属性的变化，以及它对相关副作用的影响。
最新发布
weixin_41455464的博客
07-31 999
当组件渲染时，会读取响应式数据，并将组件的渲染函数（或计算属性的 getter 函数）作为依赖收集起来。别把数组当成傻乎乎的“数据罐头”，在 Vue 3 的响应式世界里，它可是一位“戏精”。记住，掌握响应式系统的核心，就相当于掌握了 Vue 3 的“灵魂”。属性发生改变时，Vue 3 是如何“监视”它，并“通知”那些对它感兴趣的“观众”（也就是相关的副作用）。属性会被设置为 1，Vue 3 会触发组件的重新渲染，数组的长度和列表内容都会更新。变小时，Vue 3 会删除多余的元素，并触发这些元素的依赖。
vue项目，修改替换数组中某一对象的值失败
SHERLOCK_96的博客
05-26 1403
vue中修改数组时直接使用this.list[index]=data，无法修改this.list中的值。 应该使用： this.$set(this.list,index,data)
Vue2中关于无法修改数组里对象的值
css_javascrpit的博客
02-17 740
Vue2中关于无法修改数组里对象的值
vue element中信息回填时像回填的对象赋值后，赋值字段无法更改问题
qq_41821445的博客
02-19 1620
例如以上图片跳转之后回填的信息不全 需要补充信息 这是就要像form对象中赋值如下 // 表格数据 this.form.body = data.body this.form.status = data.status this.form.sort = data.sort 但是赋值之后在界面中无法修改---------解决问题如下 this.$set(this.form, 'sort', data.sort) this.$set(t.
vue中无法修改data中数据
Flying_6的博客
03-10 5201
问题描述： 现在我打算修改config1中的data属性值， 我们直接使用如下方式，则可能会不成功 axios.get('/getAreaInfo/sc').then(resp => { this.config1.data = resp.data; }); 其原因可以参考以下博主： Vue进阶（九十七）：对象动态添加属性和值_IT全栈 华强工作室-优快云博客_vue给对象添加属性和值 概括原因就是：Vue规定不允许直接修改props或者data属性，必须使用Vue.set方
Vue使用localStorage存储数据的方法
10-16
Vue 提供了一种简洁的模板语法和组件化机制，使得开发者能够高效地组织和管理应用的视图层。在实际应用中，有时我们需要将数据持久化存储在用户的浏览器中，以便在页面刷新或关闭后仍能保留这些数据，这时就可以利用...
前端一面常见vue面试题汇总
bb_xiaxia1998的博客
02-27 483
的问题主要有三个：Proxy的优势如下:proxy详细使用点击查看(opens new window)Object.defineProperty的优势如下:defineProperty的属性值有哪些 相关代码如下 只会代理对象的第一层，那么又是怎样处理这个问题的呢？监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？组件通信的方式如下：父组件通过向子组件传递数据，子组件通过和父组件通信 2. 子组件向父组件传值 绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过监
Vue - 详细介绍v-emoji-picker、vue3-emoji-picker和vue3-emoji表情包组件
miaomiaowins的博客
08-16 6767
本篇详细介绍v-emoji-picker、vue3-emoji-picker和vue3-emoji表情包组件，通过提供直观、易于使用的emoji表情选择功能，增强用户在使用Web应用时的表达力和互动性。
总结：Vue2中双向绑定不生效的排查方法及原理
l_q_l的专栏
11-05 645
综上，如果双向绑定无法实时响应：1、检查所绑定的属性在data中是否明确定义，若没有，需在data中定义；data(){return{...2、检查在使用该属性过程中，是否有删除的动作，比如对整个form进行初始化，导致其中的属性被间接删除，在此之后无法正常响应。reset(){3、检查所绑定的属性是否是对象。若是：vue2学习笔记11-深入学习监视属性并与计算属性对比_vue2 监听对象的某个属性-优快云博客。
vue:el-input使用v-model绑定多层嵌套对象后编辑时数据无法修改
qq_41854262的博客
03-09 9328
问题：新增操作时无影响，但到了编辑操作时，虽然输入框有值，但无法对其进行删除或修改（预估是在初始化赋值那步有问题） 代码如下： <el-form :model="userInfo" ref="ruleForm" :rules="rules" label-width="160px" size="mini" > <el-form-item label="详细地址" prop="location.placeText"> ..
vue通过下标改变数组属性值不生效
qq_58101212的博客
12-23 878
并不支持数组下标的响应式，也就是说检测不到通过下标更改数组的值。
vue修改数组页面不生效_Vue中数组直接修改不是不能响应吗？
weixin_39916549的博客
12-21 1410
这个问题其实挺有趣的，先抛结论：数组响应确实是不会响应，但是你可以看到你页面上的数据其实会有变化这是为什么呢？其实这里和两个概念有关：你在页面上看到的数据：其实是vue通过你的kkk的值更新对应的dom元素内部的值vue更新dom的操作(也就是1的步骤)是异步执行的关于1：你应该听说过虚拟dom这个东西吧，没听说过也不要紧。具体其实就是说我们的数据映射到页面上并不是直接映射的，而是通过数据 =〉虚...
[Vue]不能使用索引直接修改数组，但可以使用索引更新对象数组内的属性
Alcantara的博客
12-02 7676
由于 JavaScript 的限制，Vue 不能检测以下变动的数组 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength 可以使用Vue.set和javascript方法splice(Array.prototype.splice)实现，触发状态更新。
VUE中数组无法更改或者新增
bluelimon的博客
07-26 818
data:{ persons:[ {id:'001',name:'1',age:30,sex:'女'}, {id:'002',name:'2',age:31,sex:'女'}, {id:'003',name:'3',age:18,sex:'男'}, {id:'004',name:'4',age:19,sex:'男'} ] }, methods: { update5(){ // this.persons[0] = {i
vue中修改数组中的值页面无变化
qq_37928062的博客
04-18 385
开始不动态刷新数组的原因 就是没有先清除 就直接改变 所以就没刷新。
Vue为什么控件有值，但是却改动不了？
weixin_41898003的博客
12-13 590
Vue为什么一些控件有值，但是却改动不了？（使用$set） 最近工作项目中，遇到一个问题，特此来记录一下。 上图是从服务端返回的数据。这里的akyh…属性，是我直接push进去的。 但是我在界面上再想进行更改，却发现更不动，再加上还有一些表单的验证，这就导致： 靠！我input框里面有值，居然还给我报错？？？ 后来发现了一些不同,我们来看下面这张图片： 通过比较第一张图片和第三章图片，我发现第三张图片多了get和set方法。 原因 由于受JavaScript的限制，vue.js不能监听对象属性的添加和
修改（不可变）数组中元素对象嵌套的数组失败
YangljHjr的博客
11-30 477
【代码】修改（不可变）数组中元素对象嵌套的数组失败。
vue获取data中数组的value值_控制台修改vue组件中data对象里的数组意外失效
weixin_33521678的博客
12-24 3083
摘要：最近在学习Vue.js，其语法很像angularjs。然后在学习过程中遇到一些奇怪的事情，比如这篇提到的：修改data对象里面的数组，有的成功有的意外失效......一、发现最近在看Vue.js，然后发现data对象里面的属性并非都可以通过控制台来更新！按照官方的说法：每个 Vue实例都会代理其 data对象里所有的属性，注意只有这些被代理的属性是响应的......配图一张：然后艺灵就按照此...
vue中的route和router的区别
07-26
首先，用户的问题是：“我想理解Vue中$route和$router的区别 请问Vue.js中$route和$router的区别详解”。这基于提供的引用内容，我需要解释这两个概念的区别。 回顾系统级指令： - 所有行内数学表达式必须使用$...$...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值