Vue修改数组元素，与之绑定的DOM没有同步修改的解决方法

最新推荐文章于 2024-05-16 13:45:21 发布
最新推荐文章于 2024-05-16 13:45:21 发布
阅读量3k 收藏 1
点赞数
分类专栏： 前端开发 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunhaobo1996/article/details/81272860
版权

想要解决这个问题，先要了解一下Vue双向绑定的原理：

https://www.cnblogs.com/libin-1/p/6893712.html

简单的来说，用户向监听器发起修改请求，监听器进行修改值的同时，同时动态更改对应DOM的值。

通过下标直接进行值的修改会绕开监听器，所以也就无法实现动态更新的效果了。

Vue对于这个问题有对应的解决方案。方法很简单，引入Vue，然后使用Vue.set(dest,index,value)函数即可。

PS:dest，需要修改的数组；index，数组下标；value，想要修改的值。

Similar_Fair
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue数据绑定数组或者对象，改变元素时不更新view问题
qq_31965515的博客
02-14 901
 官方文档  <body> <div class="box"> <div v-for="aa in aas">{{aa}}</div> <button @click="change">变数据 </button> </d
vue中修改数组或者对象后，无法触发双向绑定
valentinelzt的博客
08-22 2016
修改data中的数组，数组发生改变，页面未发生改变 可通过$set方法来设置数组的值，该方法有三个参数，第一个是要被设置值的目标对象，第二个是设置值在数组中的索引，第三个是要设置的值 <template> <div class="home"> <ul> <li v-for="(item, index) in demoArr" :key="index"> {{item}} </li
vue数据更新但视图（DOM）不刷新解决办法_vue改变了data,dom没改变
最新发布
2401_84616292的博客
05-16 567
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
Vue form绑定数据后只能显示不能编辑
爱洗澡的拉布拉多的博客
07-03 2141
问题描述： 数据绑定后form上，数据能够正常显示，像单选、下拉框等能操作，但是操作后，显示的值不变，页面自动更新后才能显示。 原因分析： 是因为在赋值的时候，没有在data中声明属性，如下面的代码： <script> export default { data () { return { formModel: {} } }, methods: { processFormData (val) { let s = JSON.parse(J
vue框架 v-model双向绑定对象属性值不能修改的问题
qq_41102329的博客
07-05 5193
v-model绑定的值修改不了，
8、v-for修改列表内容 双向绑定失效
sunnnnh的博客
07-16 756
当我们使用vue开发时经常会遇到当vue实例已经创建好了，有时候需要再次给数据赋值时，并不能在视图中改变 原因：直接通过下标改变数组，Vue将不会监听到数据的改变 解决方法： 使用Vue.set()修改列表内容 Vue.set(list, index, value) 参数1 list： 要修改的对象 参数2 index： 属性(下标) 参数3 value： 属性的值(该下标所对应的值) 返回值：已经修改好的值 注意：会直接改变原来list的值 例如：将items中下标1处的值 修改为eVu..
Vue实现双向绑定的原理以及响应式数据的方法
12-12
双向数据绑定使得视图与模型之间的数据能够实时同步，极大地简化了开发者的工作。在Vue中，数据的响应式处理主要通过对象和数组的变异方法来实现。下面我们将详细讨论Vue如何实现双向绑定和响应式数据。 首先，我们...
vue列表数据发生变化指令没有更新问题及解决方法
10-15
这通常是因为Vue的虚拟DOM（VDOM）机制没有正确地检测到变化。本文将深入探讨这个问题并提供解决方案。 问题的核心在于Vue的`v-for`循环。在循环中，我们通常会为每个项设置一个`:key`属性，以便Vue能够跟踪和更新...
vue 中动态绑定class 和 style的方法代码详解
08-27
被绑定的 DOM 将与数据保持同步，每当数据有改动，相应的 DOM 视图也会更新。基于这种特性，通过 Vue.js 动态绑定 Class 就变得非常简单。 绑定 Class 1. 使用 v-bind 指令 bind Class 可以使用 v-bind 指令来...
vue data变量相互赋值后被实时同步的解决步骤
11-19
当在`onload()`方法（或者是用户的点击事件中）将`val_1`的值赋给`val_2`，如`this.val_2 = this.val_1`，这两个属性就会绑定到同一个引用，导致修改其中一个时，另一个也会同步更新。这并不是预期的行为，特别是在...
vue.js数据绑定操作详解
12-29
建立绑定之后，DOM将和数据保持同步，无须手动维护DOM。使代码能够更加简洁易懂、提升效率。 数据绑定语法 1.文本插值 {{ }}Mustache标签 <span>Hello　{{ name }} data:{ name: 'vue' } == > Hello vue 单次...
VUE结合jquery插件，dom冲突问题
yangqii的博客
09-19 970
一、this.$nextTick可以在dom渲染完成之后执行操作 设置定时器,setTimeout(function(){},s) 原文地址：https://blog.csdn.net/qq_38401919/article/details/80731274 二、用vue的自定义指令和组件来包装，解决冲突的问题 自定义指令---Vue1.x版本 https://v1...
Vue 数据绑定失败问题
追风2019
04-08 1473
Vue 通过对数据的操作改变html 的 dom 显示，使得前端开发聚焦于对数据的逻辑的操作。 昨天遇到一个问题：设置一个数组变量，通过 http 请求后端，循环遍历获取数据，期望可以实现数据改变后自动渲染到 dom，但结果是数据时有时无，代码如下： <select class="select select-middle" v-model="val"> <optio...
Vue中操作真实DOM导致VDom和真实DOM不一致之Vue中使用Sortable
cell的博客
12-25 868
参考： Vue中使用Sortable 场景： 使用sortable进行拖拽后，视图发生了改变，但是Vue中负责渲染视图的数据和视图不一致，更新渲染数据后会导致重新渲染，VDOM和真实dom不一致又会导致，渲染后把拖拽的视图结果复原。 解决方案： sortable只负责采集信息，采集信息结束后恢复由于采集信息导致的视图变化，确保视图始终由Vue控制渲染 const targetCont...
vue双向绑定问题，修改数据时改变了原数据
qq_43432057的博客
03-19 1152
vue双向绑定问题，修改数据时改变了原数据。
解决vue修改数据绑定的视图不能动态更新的问题
hunt_er的博客
11-23 2482
在写项目的时候遇见一个问题，修改vue v-bind或v-model绑定的数据时，视图不能更新 这就感觉很无语了。。。。当时在写一个弹窗，弹窗的数据更新后不能更新视图，需要重新刷新才行。 这样的问题简直不能忍受。。。。 多方查找，才发现 vue文档里有这样一句话。 Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在data对象上存在才能让 Vue 将它转换为响应式的。 这句话..
Vue中解决数组改变，但是DOM不变的问题
weixin_43247040的博客
01-21 1716
触发场景： 一组数组渲染多选功能，点击单项后，改变单项对象的一个属性作为判断依据，是否选择该项，虽然打印了该数组，数组单项对象的属性确实改变，但是页面展示不变（利用watchlai监听数组，数组改变，但是DOM还是不变）。 解决方案，利用this.$set(this.listData,index,item); 对该单项进行手动的双向数据绑定，解决！item 就是已改变的数组子项。 ...
vue2通过下标修改数组数据或新增对象属性时 没有双向数据绑定的解决方法
qq_46370075的博客
06-10 1252
vue2 使用this.$set解决 通过下标改变数组数据没有引起组件重新渲染的问题
【Vue2】v-if 绑定的数组或对象属性变化不响应问题解决详解
NineWaited的博客
08-10 4593
具体内容与双向绑定、$set()方法相关。整体内容过长，如果想参考最终解决，直接跳到总结即可；如果想要看一下实际情况，可以耐心浏览。
必会的Vue面试题集锦pdf高清完整版.pdf
12-14
必会的Vue面试题集锦pdf高清完整版.pdf

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值