解决前端改变数组里面的值页面没实时更新问题

已于 2023-08-04 18:24:09 修改
阅读量931 收藏 2
点赞数 1
文章标签： 前端 html
于 2022-10-09 14:08:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FUFCY/article/details/127225679
版权

把更改的值后的数组重新赋值回去就可以了，赋值用下面方法

     this.my_plan = Array.from(new Set([...this.my_plan]))

更改后的的效果

或者用新的对象去等于更改的值去页面渲染this.new_plan=this.my_plan

SY_FC
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue数组数据变化了，赋值后视图没更新的问题
qq_37635012的博客
03-20 4476
最近遇到一个问题，表格数据变化了，直接赋值后视图没更新，打印表格数据发现是最新的数据，这主要是因为，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。最开始我是直接将后端返给我的数组res.result.listpg进行赋值，没显示出来，然后我用map处理了一下。通过map数组方法，对数组里面的每条数据进行重新处理，将返回的新的数组重新赋值给当前的数组。
解决vue 更改计算属性后select选中值不更改的问题
08-27
解决 Vue 中计算属性更新后 Select 选中值不更新的问题 Vue 是一个流行的前端框架，它提供了强大的计算属性功能，允许开发者根据需求动态计算并更新页面数据。但是，在使用计算属性时，可能会遇到一些意外的问题，...
js 页面定义的全局变量 值改变后其他页面获取不到_Three.js的Hello World
weixin_28707535的博客
12-15 608
关注初识Threejs与小编一起学习成长大家还记得小编之前说的Three.js的三大组件嘛？它们分别是相机(Camera)、场景(Scene)和渲染器(Renderer)，今天就来实现一下Three.js的Hello World，案例就是一个会旋转的正方体，旋转的正方体就算我们踏入WebGL这个神奇的世界的开始。下图就是最终效果，看到效果后是不是迫不及待的想试试，那就动手一起实现下吧...
el-table绑定的数组里面的对象值进行修改时，视图没有更新
茂茂的博客
04-20 2583
其中，array是绑定到el-table的数组，index是需要修改的对象在数组中的索引位置，propertyName是需要修改的属性名称，newValue是新的属性值。其中，findIndex()方法用于查找满足条件的元素在数组中的索引位置，item是数组中的每个元素，item.id表示对象的id属性值，2表示要查找的id值。其中，第一个参数是数组对象，第二个参数是对象在数组中的索引位置，第三个参数是一个新的对象，它继承了原始对象的所有属性，但是将age属性值改为20。
Vue 不能检测以下数组的变动的解决办法
hkduan的博客
11-26 672
Vue 不能检测以下数组的变动： 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 举个例子: var vm = new Vue({ data: { items: [‘a’, ‘b’, ‘c’] } }) vm.items[1] = ‘x’ // 不是响应性的 vm.items.length = 2 // 不是响应性的 为了解决第一类问题，以下两种方式都可以实现和 vm
Vue中对象或数组数据更新但视图不刷新问题的解决策略
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-13 7590
在vue中，数据的绑定都不用我们操心，例如在data中有一个 msg 的变量，你修改它，那么在页面上，msg 的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的 length 变成0，vue就无法知道发生了改变。
vue数据更新UI不刷新显示的解决办法
11-19
直接改变数组的长度也会导致UI不更新。例如： ```javascript arr.length = 2; // UI不会更新 ``` 应使用`splice`方法来实现： ```javascript arr.splice(arr.length, 1); // UI会更新 ``` ### 二、对象属性的添加或...
web前端面试重点难点问题
01-08
直接通过索引设置数组项或改变数组长度，Vue 无法检测到这些变化，这时需要使用 `vm.$set` 或者 Vue.set 进行更新。 【Vue.js 生命周期中的 update】 在 update 钩子中不应直接改变数据，因为这可能会引发无限循环...
AngularJs点击状态值改变背景色的实例
10-18
在AngularJS中，我们经常需要根据用户交互来更新视图的状态，例如改变元素的背景色。这个实例展示了如何在AngularJS中实现一个功能，当用户点击某个元素时，该元素的状态值改变，进而改变其背景色。以下是实现这一...
前端随机抽选的一个小页面
07-15
在这个例子中，很可能有一个JavaScript数组存储了待抽选的数据，然后通过一个函数或者事件处理程序（比如按钮点击事件）来随机选取数组中的一个元素并更新到页面上。 这里还提到了`jquery-3.2.1.js`，这表明项目中...
VUE：JS中进行数组对象赋值，页面不能实时回显
干饭搬砖两不误。
04-09 4600
简介 VUE项目中，有时候进行数组对象赋值时，不能实时回显到页面中，但是打印又有新的数据在里面。 具体实现 场景一：对象赋值新的属性时，页面不能回显。 原因：该对象本身是没有这个属性的。 解决方案： this.$set(obj, 属性名, 属性值)； 案例如： this.$set(obj, "name", "张三"); 场景二：数组赋值新的属性时，页面不能回显。 原因：VUE中由于 J...
更新state值中的对象或者数组（数组里边的值是对象）时，不更新视图，使用 Vue.set
weixin_46554760的博客
04-02 1094
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 data () { return { items: [ { message: "one", id: "1" }, { message: "two", id: "2" }, { message: "th...
数据无法回显,数据不能实时更新例如:elementui select 更改选中值后，无法渲染到页面中？输入框查询数据之后无法渲染到页面
路飞船长的博客
06-16 3291
通过事件打开弹窗,点击选中的数据将数据更新到input输入框内,添加到输入框之后可以修改数据例如CRUD的操作问题一:事件弹窗的引用事件方法问题二:点击选中的数据无法实时更新到输入框内问题三:需要点击其它按钮input输入框才会更新,无法做到实时更新问题一分析: 方法有很多种可以在菜鸟和csdn上都能找到,也许是格式不正确,漏写了某个字段问题二分析: 方法绑定的数组内的属性可能没对上,代码少写漏写,没有添加实时更新的代码问题三分析:很问题二基本类似解决方案1:我这里是试过几个有的格式不对最后使用的:@key
数据值改变了，但是页面没有变化
stm870581942的博客
05-11 1374
使用this.$set方法 this.$set(obj, key, value) this.$set(数据对象, 添加的数据名称, 添加的数据值) 链接: https://blog.csdn.net/hhkongbai/article/details/101022019.
动态的给data里面的数据添加一个新属性的时候为什么视图不刷新？怎样解决？
qq_44052087的博客
11-14 307
动态的给data里面的数据添加一个新属性的时候为什么视图不刷新？怎样解决？
Vue数据更新，页面却没有更新的几种情况及解决方法
热门推荐
LFQP_的博客
03-27 2万+
Vue数据更新，页面却没有更新的几种情况及解决方法
VUE中数组更新后，页面没有动态刷新问题
u010227042的博客
06-15 1万+
最近使用vue开发时，在一个函数中使用for循环，改变了页面中的数组，在函数中查看是修改成功的，但是页面中没有动态刷新。 在Vue的官方文档有提到这样一个注意事项： 数组变更检测注意事项： 由于 JavaScript 的限制，Vue不能检测以下数组的变动： 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 举个例子： var vm = new Vue.
vue动态添加，删除数据,页面没有实时更新？
ljhhhkj的博客
08-02 242
this.$delete(this.obj,'name'),//动态删除。this.$set(target,key,value）,//动态添加。target操作的数据，就是你要操作的数组或者对象.value更改的数据，属性值.key要操作的的字段,属性.
vue给对象动态添加属性后，页面不动态更新的问题
TheobaldWong的博客
12-31 1768
问题描述 在vue页面data中初始化一个对象，后通过代码给对象添加一个属性，后发现数据对象中添加成功并且可以改变 ，但页面没有进行更新。 原因所在 解决方式： 一、利用Vue.set(object,key,val) 例如：Vue.set(vm.obj,'k1','v1') 二、利用this.$set(this.obj,key,val)，这是Vue.set()的全局实例 例如：this.$set(this.obj,'k1','v1') 三、利用Object.assign({...
从后端接口拿到一个数组，数组里面每一项都有一个地址，当后端地址改变了的时候，前端的数据没有变化，js怎么做到前端数据同步且局部刷新页面
03-29
可以使用定时器或者WebSocket来实现前端数据的同步。具体实现方法如下： 1. 定时器：在前端页面中设置一个定时器，定时向后端请求最新的数据，并将数据更新到前端页面中。可以设置定时器的时间间隔，例如每隔5秒钟请求一次数据。 2. WebSocket：使用WebSocket建立前后端之间的实时通信，当后端数据发生变化时，后端通过WebSocket向前端推送最新的数据，前端接收到数据后直接更新到页面上。 局部刷新页面可以使用前端框架（如Vue、React等）来实现，当数据发生变化时，只需要更新对应的视图组件即可。如果没有使用前端框架，可以通过手动操作DOM元素来实现局部刷新。例如，当数据发生变化时，先获取到需要更新的DOM元素，然后使用innerHTML或者innerText等方法将新的数据渲染到页面上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值