Vue 使用下标更新数组时遇到的坑

最新推荐文章于 2024-03-07 17:02:22 发布
最新推荐文章于 2024-03-07 17:02:22 发布
阅读量661 收藏
点赞数
分类专栏： Vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c930363716/article/details/108604388
版权

Vue 使用下标更新数组时遇到的坑

写这篇文章的目的只为记录及加深印象,避免后续犯同样的错误~~

首先来看一下在使用下标更新时的效果图:

Object.assign(this.purchaseOrder.orderItems[index], _order)

this.purchaseOrder.orderItems[index] = _order

在使用这两种方式时,效果一样
在这里插入图片描述
在排除代码没有问题之后,查资料发现可以使用splice来更新数组

this.purchaseOrder.orderItems.splice(index, 1, _order)

另外说可以使用vue的set方法来处理,这里没有尝试过

vue.set(items, index, newValue)
在这里插入图片描述

C930363716
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决vue.js提交数组时出现数组下标的问题
10-16
今天小编就为大家分享一篇解决vue.js提交数组时出现数组下标的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【vue3】setup中数组数据变化页面不渲染
sumimg的博客
10-13 723
此时用到的版本是vue: 3.2.13，目前已修复此问题。——2023.3.24 修改。点击按钮后，数组发生了变化，但是页面不渲染。点击按钮后，数组发生变化，页面重新渲染。
解决vue中修改了数据但视图无法更新的情况
12-09
我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况： 1、v-for遍历的数组，当数组内容使用的是arr[0].xx =xx更改数据，vue无法监测到 数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以 Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测： push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue) filte
vue.js移动数组位置,同时更新视图的方法
11-26
使用vue.js v-for绑定若干个选项，需要对选项进行排序上下移动操作。 需要对options里面数组的位置进行交换，通常是这样来写： 假设向前移动一个： var index = this.options.indexOf(option); //获取当前选项对象在数组里面的索引。 var tempOption = this.options[index-1]; //存储前一个 this.options[index-1] = option;(this.options[index]) this.options[index] = tempOption; 这样的确改变了数组的顺序，但是视图却没有
vue踩坑记录之数组定义和赋值问题
10-17
主要给大家介绍了关于vue踩坑记录之数组定义和赋值问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue通过下标取值的问题
aocang1339的博客
07-02 1782
vue通过下标取值的时候有可能会出现报错。图片可以渲染出来，但是页面会报错。 原因是渲染速度的问题，刚进来的时候html先渲染，list[0].coverPath 就是undefined啊， 针对这一个解决办法，可以给父标签一个v-if="list[0]" ，等有这个元素后才显示，就不会报错了。 <!--一开始的写法 --> ...
解决vue遍历移除数组元素 时，数据出错，下标不匹配，$nextTick
m0_37394102的博客
08-05 2609
vue双向数据绑定，删除数组元素的时候 已经不是原数组了，数组下标变化但循环还是在继续 this.$this.$nextTick(() => {(() => {}） Vue的官方文档中详细解释： Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种...
Vue数组获取下标坑
qq_42249813的博客
12-21 1万+
使用Vue 编写了基础的添加删除功能遇到了一个小坑 <div id="app"> <fieldset> <legend> Create New Person </legend> <div> <label>姓名:</label> <input v-m...
vue3数组元素发生变化重新赋予下标
qq_43393995的博客
10-08 1144
场景：vue3中某个数组针对于下标去删除，删除后要及时更新各数据元素的下标，保证再次进行删除时，按正确的下标进行删除。
详解VUE 数组更新
11-30
1、数据方法分类： （1）原数组改变 push  pop  unshift  shift  reverse  sort  splice （2）原数组未变，生成新数组 slice  concat  filter 对于使原数组变化的方法，可以直接更新视图。 对于原数组未变的方法，可以使用新数组替换原来的数组，以使视图发生变化。 示例代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>vue示例</title> </head> <body> <div id="
vue 重塑数组之修改数组指定index的值操作
11-19
如下所示： vm.items[indexOfItem] = newValue vue不能检测数组的变动 想要实现可以使用vue的set方法 this.$set(this.items,indexOfItem,newValue); 补充知识：vue中利用索引直接设置一个数组项，不能触发视图更新的问题 由于 JavaScript 的限制，Vue 不能检测以下数组的变动： 1、当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 2、当你修改数组的长度时，例如：vm.items.length = newLength 举个例子： var vm
vue项目中。数组对象有值打印整个数组可以看到各个元素的值。但是打印某个下标里面的内容就没有值
最新发布
m0_61265297的博客
03-07 138
使用this.$nextTick(()=>{}），套在外面。
vue中，js使用splice的坑，踩坑，踩坑，踩坑。
helei1314的博客
03-27 1993
前言 使用v-for循环时候，利用下标index作为唯一值，大坑啊 一、关于使用splice删除导致的问题 1.页面元素 2.打印元素 3.问题结论 arr.splice(index,1)，删除数组里面元素，原数组发生了变化，里面值发生了变化，导致数组里面最后一个对象，里面双向绑定的值，为空了 二、解决方案 就是将:key=“index” 改为循环对象的唯一值，比如:key=“id” 总结 谨以此文，记录我项目中实践过的坑，谢谢大家观看。 ...
关于vue中数组赋值无法渲染在页面的问题
oXiangZuoZuo12345的博客
08-14 7517
在做一个网页重构成VUE的时候，有段代码是这样的 一直能打印出pics的值，但是就是无法渲染出来，检查了不是视图那边是错，最后发现其中有两处错误，一处是this指向问题，此地打印出来的this.pics并不是data里面的pics的值，后面把success函数改成箭头函数即可，还有vue中数组赋值数组不能直接赋值。可以用push方法，下面是修改后的代码  ...
vue处理对象数组（下标和值）
热门推荐
岁末zzz的博客
07-16 1万+
{ 0:‘123’, 1:‘1234’ } Storelist(){ this.$api.question().then(res=>{ if (res.status==1){ let that = this let a = res.result.store // ...
分享 60 个 Vue 常见问题汇总及解决方案
前端达人
12-28 583
Q1：安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ npm install -g cnpm --registry=https://registry.npm.taobao.org // cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些 yarn 和...
vue3 批量注入elementUI icon组件以及解决用字符串做下标报错问题
qq_37656005的博客
01-13 802
vue3 批量注入elementUI icon组件, 解决用字符串做下标报错问题， Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘typeof import("…/node_modules/@element-plus/icons/types/index”)’
在vue使用foreach迭代数组进行模糊查询
07-24
在 Vue 中，你可以使用 `forEach` 方法迭代数组进行模糊查询。以下是一个简单的示例代码： ```html <li v-for="item in filteredItems" :key="item.id">{{ item.name }} export default { data() {...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值