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

已于 2023-08-04 18:24:09 修改
阅读量883 收藏 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 4230
最近遇到一个问题，表格数据变化了，直接赋值后视图没更新，打印表格数据发现是最新的数据，这主要是因为，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。最开始我是直接将后端返给我的数组res.result.listpg进行赋值，没显示出来，然后我用map处理了一下。通过map数组方法，对数组里面的每条数据进行重新处理，将返回的新的数组重新赋值给当前的数组。
vue数据更新UI不刷新显示的解决办法
11-19
vue比较常见的坑就是数据（后台返回）更新了，但是UI界面并没有更新，常见于以下情况： 一、数据为数组时 1.通过数组索引修改数组元素例如： 此时UI数据并不会刷新 2.修改数组长度时： 解决方案： 如果data为JSON数组则如下： 第一个参数为要更新数据的数组，第二个参数为要更新的数组中具体的元素下标，第三个参数为新数据 备注: 数组原型上的方法vue可直接检测到变化：push(),pop(),shift(),unshift(),splice(),sort() 二、数据为对象时: Vue 不能检测对象属性的添加或删除：你可以这样添加一个属性 如果要添加多个属性可以 补充知识：v
JavaScript数据渲染不更新问题
qq_43512769的博客
05-12 577
获取最新的数据在页面中无法渲染 数组的数据更新完毕，但是页面中却不更新。 尝试了几种方法，较好用的一种如下 代码块 //获取websockt的table消息返回值 get_table(state,data){ console.log(data) let list = data.tablelist; let arr = []//新数组 for(let i=0; i<list.length; i++){ list[i].change = true;
PHP与Web页面交互 -表单与PHP的关系.ppt
06-05
* PHP与Web页面交互 -----表单与PHP的关系 课程内容 表单与PHP的关系 提交表单信息 一、表单与PHP的关系 虽然表单是HTML页面的一部分，但是表单与PHP脚本传递数据的过程是无缝衔接的。PHP脚本获取表单中的数据并完成处理，然后PHP解析器将处理结果以代码的形式嵌入到HTML中，最后浏览器解析渲染HTML内容并将页面呈现给用户。 PHP处理表单数据的基本流程，如图所示。 一、表单与PHP的关系 从图中可以看出，数据从表单发送到服务器，PHP脚本经过处理再生成HTML并返回。当PHP脚本处理表单时，它会检索URL、表单数据、上传文件等信息，然后通过PHP内置全局变量数组$_GET[]、$_POST[]等获取用户提交的数据。 二、提交表单信息 GET提交方法的本质是将数据通过URL地址的形式传递到下一个页面，此方法提交的表单不会明显地改变页面状态。GET方法是最简单的提交方法，主要用于静态HTML文档、图像或数据库查询结果的简单检索。 1 .GET方法提交表单 二、提交表单信息 <body> 请输入账号和密码：<br><br> <form action="do_get.
feed-reader-tester:Udacity前端Web开发人员纳米学位的一部分
05-17
提要阅读器测试仪 作为Udacity的前端Web开发人员Nanodegree的一部分，Feed Reader Tester项目完成了 项目概况 该项目包含一个基于Web的应用程序，该应用程序读取RSS feed并使用用编写的测试套件。 该测试套件包含测试以下各项的规范： 定义了allFeeds数组，其中包含相关RSS费用的详细信息，并且不为空 allFeeds数组中的每个提要都包含一个名称键 allFeeds数组中的每个提要都包含一个url键 首次加载页面时，应用程序菜单按钮被隐藏 每次单击菜单图标时，菜单的可见性都会改变 异步loadFeed（）函数完成其操作，并且Feed容器中至少有1个条目 每次在菜单上的新feed上调用异步loadFeed（）函数时，内容实际上都会更改 运行应用程序 在浏览器中打开index.html文件
js 页面定义的全局变量 值改变后其他页面获取不到_Three.js的Hello World
weixin_28707535的博客
12-15 594
关注初识Threejs与小编一起学习成长大家还记得小编之前说的Three.js的三大组件嘛？它们分别是相机(Camera)、场景(Scene)和渲染器(Renderer)，今天就来实现一下Three.js的Hello World，案例就是一个会旋转的正方体，旋转的正方体就算我们踏入WebGL这个神奇的世界的开始。下图就是最终效果，看到效果后是不是迫不及待的想试试，那就动手一起实现下吧...
el-table绑定的数组里面的对象值进行修改时，视图没有更新
茂茂的博客
04-20 2492
其中，array是绑定到el-table的数组，index是需要修改的对象在数组中的索引位置，propertyName是需要修改的属性名称，newValue是新的属性值。其中，findIndex()方法用于查找满足条件的元素在数组中的索引位置，item是数组中的每个元素，item.id表示对象的id属性值，2表示要查找的id值。其中，第一个参数是数组对象，第二个参数是对象在数组中的索引位置，第三个参数是一个新的对象，它继承了原始对象的所有属性，但是将age属性值改为20。
VUE：JS中进行数组对象赋值，页面不能实时回显
干饭搬砖两不误。
04-09 4494
简介 VUE项目中，有时候进行数组对象赋值时，不能实时回显到页面中，但是打印又有新的数据在里面。 具体实现 场景一：对象赋值新的属性时，页面不能回显。 原因：该对象本身是没有这个属性的。 解决方案： this.$set(obj, 属性名, 属性值)； 案例如： this.$set(obj, "name", "张三"); 场景二：数组赋值新的属性时，页面不能回显。 原因：VUE中由于 J...
Vue中对象或数组数据更新但视图不刷新问题的解决策略
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-13 5009
在vue中，数据的绑定都不用我们操心，例如在data中有一个 msg 的变量，你修改它，那么在页面上，msg 的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的 length 变成0，vue就无法知道发生了改变。
Vue 不能检测以下数组的变动的解决办法
hkduan的博客
11-26 664
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
jQuery+PHP实现可编辑表格字段内容并实时保存
11-22
本例适用场景：当查看详细资料，如用户详情信息，发现其中某几个字段信息需要修改，可直接点击该字段内容进行修改，节约了用户时间，（传统的做法是进入一个编辑页面，列出所有编辑的字段信息，即使你只需要编辑其中一两个字段内容，然后点击提交）提高了WEB响应速度，从而提高了前端用户体验。 本例依赖jquery库，并基于插件，具有以下特点： 实时编辑，后台实时响应，并即时完成局部刷新。 可自定义输入表单类型，目前jeditable提供text,select,textarea类型。 响应键盘的回车和ESC键。 插件机制，本例提供与jquery ui的datepicker日历控件的整合。 下面我们来一步步讲解
基于JavaScript实现前端数据多条件筛选功能
11-29
代码中主要使用js的过滤器Array.prototype.filter，该方法会对数组元素进行遍历检查，返回一个符合检查条件的新数组，不会改变原数组。 // filter() var foo = [0,1,2,3,4,5,6,7,8,9]; var foo1 = foo.filter( ...
vue 前端请求参数为数组，后端接收有误
cimbala的博客
07-06 875
前端请求后端需要传递数组，但是后端接收到的数据不是理想数据，把下标也映射为内容了（这里我也不是很懂，有了解的可以在评论区告诉我，谢谢） 我希望后端接收到的数据是这样的 将内容映射到地址上（有bug，内容太多会超过浏览器的url长度限制） 友友们有更好的方法吗？我太菜了......
VUEJS(vuejs) 数组数据不及时刷新
w1213096890的博客
04-20 4528
在Vue对象中的methods属性中构建一个方法用于刷新data使用Vue.set方法进行手动刷新methods:{ update:function(o){ Vue.set(this,'userlist',o); }}其中userlist是我的数组变量名...
vuejs改变数组对象值，视图不更新问题
weixin_45849330的博客
05-24 300
// 利用vuejs $set方法 // 数组arr=[1,2,3] // 1 代表下标，5代表新值 this.$set(this.arr, 1, '5') // 数组套对象 // arr[ // { name: 'jjj', price: 11, count: 2, totalAmount: 100 }, // { name: 'hhh', price: 12, count: 3, totalAmount: 120 }, // ] this.arr.forEach((item, index
更新state值中的对象或者数组（数组里边的值是对象）时，不更新视图，使用 Vue.set
weixin_46554760的博客
04-02 1076
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 data () { return { items: [ { message: "one", id: "1" }, { message: "two", id: "2" }, { message: "th...
数据值改变了，但是页面没有变化
stm870581942的博客
05-11 1358
使用this.$set方法 this.$set(obj, key, value) this.$set(数据对象, 添加的数据名称, 添加的数据值) 链接: https://blog.csdn.net/hhkongbai/article/details/101022019.
VUE中数组更新后，页面没有动态刷新问题
热门推荐
u010227042的博客
06-15 1万+
最近使用vue开发时，在一个函数中使用for循环，改变了页面中的数组，在函数中查看是修改成功的，但是页面中没有动态刷新。 在Vue的官方文档有提到这样一个注意事项： 数组变更检测注意事项： 由于 JavaScript 的限制，Vue不能检测以下数组的变动： 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 举个例子： var vm = new Vue.
vue3中的reactive和ref
最新发布
weixin_43784341的博客
05-08 540
在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。
vue数据改变但页面没变
09-17
Vue是一种使用MVVM模式的前端框架，它通过数据绑定来实现数据的动态更新。当我们修改Vue实例中的数据时，页面会自动响应并更新相应的DOM元素以反映数据的变化。然而，有时候我们可能会遇到数据改变但页面没有更新的情况，这通常是由以下几种原因造成的： 1. 没有正确定义响应式数据：在Vue中，只有被定义为响应式的数据才会触发页面的重新渲染。如果某个数据没有被正确定义为响应式，那么当它发生变化时，页面是不会更新的。解决这个问题，我们需要使用Vue提供的data函数或者Vue实例中的属性来定义数据，并将需要被观察的数据定义为响应式的。 2. 数组或对象的变化没有被Vue检测到：由于JavaScript的限制，Vue不能检测到数组或对象长度的变化，也不能检测到直接通过索引或者修改数组长度的方式来改变数组的元素。为了让Vue能够监听到数组或对象的变化，我们应该使用Vue提供的相关方法来进行数组或对象的操作，比如使用Vue.set或Vue.delete来新增或删除数组/对象的元素。 3. 异步更新问题：当我们修改数据的方式是异步的，比如在一个定时器内或者在Promise回调函数中修改数据，Vue可能无法自动检测到数据变化。这时，我们可以手动调用Vue实例的$forceUpdate方法来强制重新渲染页面。 4. 深层嵌套数据的问题：Vue只能检测到对象或数组的第一层属性的变化，而无法深度递归检测嵌套在其中的属性的变化。为了让Vue能够检测到深层嵌套数据的变化，我们可以使用Vue提供的$set方法或者使用深度监听来实现。 总之，当我们遇到Vue数据改变但页面没有变化的情况时，我们应该仔细检查是否正确定义数据，是否使用了正确的数据操作方法，是否有异步更新的问题以及是否需要深度递归监听数据的变化。通过仔细排查这些原因，我们通常可以找到并解决问题，使页面能够正确地响应数据的变化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值