Vue数组赋值问题

已于 2022-05-09 00:53:48 修改
阅读量934 收藏
点赞数 1
文章标签： 经验分享
于 2022-05-09 00:41:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60481396/article/details/124657884
版权
在Vue项目中，遇到使用axios获取数据并处理后重新渲染表格，但列表未更新的问题。由于JavaScript限制，Vue无法检测某些数组修改操作。解决方案是利用Vue的$set方法，如`this.$set(this.array, index, value)`，这使得数组更新成功触发视图刷新，问题得以解决。
摘要由CSDN通过智能技术生成

最近写项目时遇到的问题，用axios发送请求，从后端拿回来了数据（是个数组）。

经过一系列的处理之后，如下图

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETkBUT0JZODUx,size_19,color_FFFFFF,t_70,g_se,x_16

把处理好的数据从新赋值，然后数组从新渲染了表格，修改了List，然而列表没有改变。 Vue 不是双向绑定吗？当时我就傻了，调试了半天
  列表毫无反应，我明明改变了数组的值，还有他的长度

最后请教了实验室的师兄，师兄也是很高冷啊，反手就扔给了我一篇文章，我看完之后醍醐灌顶。内心真佩服师兄哇，按照他的方法也是顺利解决了。

大概的问题就是：由于 JavaScript 的限制，Vue 不能检测刚刚的数组修改操作，要调用$set的方法

  • this.$set(this.array,index,value)

这样就完美解决了

TOBY851
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 数组赋值_如何给Vue的data中的数组赋值？
weixin_33553051的博客
12-23 3237
---------html-----------{{item.text}}{{item.text}}￥{{item.text}}----------script------------var vm = new Vue({el: "#tbody",data: {index: [],domain: [],price: []}}).....function getBackData(params, pag...
vue 解决数组赋值无法渲染在页面的问题
10-16
这导致了一个常见的问题：当你尝试通过赋值方式更新数组，虽然实际数组确实被修改了，但Vue的视图不会随之更新，从而引发“数组赋值无法渲染在页面”的问题。 首先，我们来看一下这个问题的两个主要错误点： 1. **...
vue遍历数组
01-14 431
// 获取数组 let update = thisVM.formData.update; //判断数组是否为空，判断顺序不能反 if (update !== undefined && update.length >= 0) { //遍历数组 update.forEach(item => { if (满足条件) { ...
vue 数组和对象不能直接赋值情况和解决方法(推荐)
08-29
主要介绍了vue 数组和对象不能直接赋值情况和解决方法,需要的朋友可以参考下
Vue.js数组更新检测：直接赋值的影响
你若盛开，清风自来
07-07 457
本文将探讨在Vue.js中，直接给数组项赋值是否会引起Vue的响应式更新。了解这一点对于开发者来说至关重要，因为它有助于优化数据更新和避免潜在的问题。在Vue.js中，直接给数组项赋值会引起Vue的响应式更新。然而，在实际开发中，仍然需要注意避免直接修改数组，并使用Vue提供的方法来更新数组。这样可以帮助开发者编写更易于维护和调试的代码。
vue数组赋值
weixin_30423977的博客
02-28 1983
在使用vue开发移动端项目过程中，统一数组在对多个变量赋值时；希望一个数组的改变不影响另外一个数组，此时可以使用如下方式实现： let arr = [] let a1 = JSON.parse(JSON.stringify(arr)) let a2 = JSON.parse(JSON.stringify(arr)) a1.push('1') a1.length === 1 ...
Vue之数组赋值
ljljlj1993的博客
10-23 7319
Vue不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 当第一种情况需求时，可以使用this.$set(this.arr,index,newVal) Vue不能检测对象属性的添加和删除： 可以使用this.$set(this.person...
Vue3数组重新赋值问题
weixin_42202992的博客
09-15 3704
vue3中使用组合式式API时定义响应式数据需要使用reactive或者ref,两者使用时有些许不同,下面通过重新赋值数组来说明两者的不同
vue踩坑记录之数组定义和赋值问题
10-17
问题在于，当尝试用下标（如`this.effective_date[0]`和`this.effective_date[1]`）给数组赋值时，如果数组未定义长度或预先填充，Vue可能无法正确检测到变化，从而导致视图不更新。这是因为在JavaScript中，直接...
vue中的数组赋值问题
s_156的博客
11-23 4129
vue中，支持对象赋值，数组，数组对象赋值需要格外注意！
踩坑：vue3路由跳转，数组对象重新赋值
Big_YiFeng的博客
01-13 5461
最近学习Vue3的时候，利用业余时间做了一个简单的ToDoList来进行练习，效果如下： 但是再完成这个小demo的时候遇到了一点常见的坑，所以分享出来，希望给刚刚学习vue3的小伙伴一点帮助 1.路由跳转 正常的路由跳转是需要进行以下几步的 第一步： 引入 useRouter import { useRouter } from 'vue-router' 第二步： 实例化路由方法 const router = useRouter() 第三步： 使用跳转 router.push('/Login') /
vue数组深层赋值
weixin_46058007的博客
07-05 976
使用vue开发的项目，有一个页面的data中定义了两个数组，需要把其中一个数组赋值给另一个数组的其中一个对象的一个属性。 数组深层赋值
深拷贝与浅拷贝
roman
10-12 467
2、深拷贝与浅拷贝 看这一篇的时候建议先看一下上一篇关于数据类型的文章。 直接赋值 直接赋值:把对象a赋值给对象b,实际上是把对象b的地址指向对象a的对象。a与b的地址指针一样，指向同一个对象，所以修改b时，a也会跟着发生改变。注意，修改b的无论是对象属性（引用数据类型）还是非对象属性（基本数据类型），a都会跟着发生改变。 let a = { name:'a', arr:[1,2] } let b = a; b.name = 'b'; console.log(a.name); // b b.arr
vue中数组赋值给一个变量，修改变量值数组的值也会改变的问题。
weixin_50917325的博客
12-04 633
此时发现，打印的arr全都包括了test:"测试用例"的一个字段，也就是说，我在改变赋值的变量的时候，也同时改变了arr这个数组。去找了资料发现：这好像是vue的深拷贝和浅拷贝的知识点（我比较少做前端，并且是个编程小白，所以不太了解）使用：JSON.parse(JSON.stringify(item))
Vue.js - 数组和对象的赋值动态变化 & 克隆
热门推荐
牧码的博客
07-12 1万+
这篇文章主要介绍了 vue 数组和对象不能直接赋值动态变化 & 克隆情况和解决方法，需要的朋友可以参考下。 一、直接赋值动态变化 1.1、Vue 不能检测以下变动的数组 当你利用索引直接设置一个项时，例如 vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如 vm.items.length = newLength 1.......
vue 数组和对象不能直接赋值情况和解决方法
qq_29069777的博客
10-08 912
Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如： vm.items.length ...
vue给数组对象赋值改变对象里面的数据,数据没有更新this.$set
最新发布
qq_39695210的博客
07-31 262
【代码】vue给数组对象赋值改变对象里面的数据,数据没有更新this.$set。
vue 数组赋值 拷贝
05-01
数组赋值是将一个数组变量赋值给另一个数组变量。这样的赋值不会创建新的数组，而是将两个变量指向同一个内存地址。如果其中一个变量修改了数组的值，另一个变量也会受到影响。 数组拷贝是将一个数组的值复制到另一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值