`
iaiai
  • 浏览: 2146554 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

vue中修改了数据但视图无法更新的情况

 
阅读更多
我们有时候常碰到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)
  • filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组


Vue 不能检测以下变动的数组：
  • ① 当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue
  • ② 当你修改数组的长度时，例如： vm.items.length = newLength


话不多说，上代码,并且附上效果图： 
<body>
     <div id="app">
           <ul>
               <li v-for="(item,index) in gc">
                   <span>{{item.name}}-{{index}}</span>
                   <span>{{item.age}}-{{index}}</span>
               </li>
           </ul>
           <button @click="add">click</button>
     </div>
     <script>
       new Vue({
           el:'#app',
           data:{
               gc:[
                   {name:'zhangsan',age:10},
                   {name:'lisi',age:21},
                   {name:'wangwu',age:22},
                   {name:'wangwu',age:22}
               ]
           },methods:{
               // 当点击事件触发时候会修改掉gc[0]的值为lisi,但是视图不会发生变化
               add(){
                   this.gc[0] ={name:'lisi',age:22} 
               }
           }
       })
      </script> 
</body>


引用
以上Vue 不能检测数据变动的数组的2种方式解决办法
将代码中的add()方法改为:

add(){
      // this.gc[0] ={name:'lisi',age:22} //这样直接修改不能被vue监听到
       Vue.set(this.gc,0,{name:'lisi',age:22}) //这样就能被vue监控到，更新视图              
 }

引用

1
2
3
4


vue官网给的官方解释

本人代码，给Obj添加属性，并进行监听

  • 大小: 150.2 KB
  • 大小: 24.3 KB
  • 大小: 55.1 KB
  • 大小: 15 KB
分享到：
| 一些常用的命令
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    解决vue中修改了数据但视图无法更新的情况

    今天小编就为大家分享一篇解决vue中修改了数据但视图无法更新的情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

    vue数据更新但是界面却不刷新

    在使用vue的过程中，很多时候会遇到数据更新但是界面却不刷新，这个附件代码可以帮你解决，看看吧

    vue 修改 data 数据问题并实时显示操作

    补充知识：vue data中数组以及对象 属性改变时不能及时反馈到视图中问题的解决方式 1.vue 对数组更新检测 的机制又很明确的说明： 变异方法：Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。 这些...

    vue2、vue3开发工具 dev tools，页面数据更新，data里或者是setup的数据不更新，需要更换增强版插件

    页面数据更新，但是data或者setup里面的数据不更新，卸载原来的开发插件，卸载浏览器都无法解决。只有下载该插件才能解决。

    解决vue中对象属性改变视图不更新的问题

    但当数据为对象，我们增加或删除对象属性值时，视图并不触发更新，如何解决这个问题呢？ 实例代码如下： let vm = new Vue{ el: '#app', data: { obj: { k: 'v' } }, ... } 有三种解决方案： 方案一：利用...

    Vue.set()动态的新增与修改数据,触发视图更新的方法

    用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 例： data:{ namelist:[ {message:叶落森,id:1}, {message:姜艳霞,id:2}, {message:姜小帅,id:3} ] }, Vue.set(this...

    解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)

    一、在我们使用vue进行开发的过程中，可能会遇到一种情况： 当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新...

    vue面试题汇总（1.vue优点2.vue响应式原理3.单向数据流和双向数据流）

    数据视图相分离。视图可以独立于数据变化和修改，当数据变化的时候视图也可以不变。 便于维护。 2.vue响应式原理 vue的响应式 3.单向数据流和双向数据流 单向数据流：数据流动方向可以跟踪，流动单一。缺点是写起来...

    vue数据更新UI不刷新显示的解决办法

    vue比较常见的坑就是数据（后台返回）更新了，但是UI界面并没有更新，常见于以下情况： 一、数据为数组时 1.通过数组索引修改数组元素例如： 此时UI数据并不会刷新 2.修改数组长度时： 解决方案： 如果data为JSON...

    【JavaScript源代码】手写Vue源码之数据劫持示例详解.docx

    　Vue中的响应式(reactive): 对对象属性或数组方法进行了拦截，在属性或数组更新时可以同时自动地更新视图。在代码中被观测过的数据具有响应性　我们先让代码实现下面的功能：　&lt;body&gt;　&lt;script&gt;　const

    Vue相关面试题.pdf2023VUE面试题目+详解大全

    2023VUE面试题目+详解大全...父级 prop 的更新会向下流动到子组件中，每次父组件发生更新，子组件所有的 prop 都会刷 新为最新的值 数据从父组件传递给子组件，只能单向绑定，子组件内部不能直接修改父组件传递过来的数

    详解Vue中数组和对象更改后视图不刷新的问题

    Vue数据响应原理 官方的解释很清晰： 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object....

    详解vue修改elementUI的分页组件视图没更新问题

    今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果，结果发现分页组件视图并没有渲染，还是停留在原本的页码处。 然后想了想，想起了.sync这个语法糖，让数据进行双向绑定。 直接上修改的代码看看 &...

    vue语法.rar

    当模型中的数据发生改变时，那么视图中的数据也对应的发生改变。 2、v-text 将一个变量的值渲染到指定的元素中 3、v-html 可以真正输出html元素 4、v-model 实现双向数据绑定 5、v-build 绑定页面中元素的...

    vue面试题汇总（含详细介绍）

    数据视图相分离。视图可以独立于数据变化和修改，当数据变化的时候视图也可以不变。 便于维护。 2.vue响应式原理 vue的响应式 3.单向数据流和双向数据流 单向数据流：数据流动方向可以跟踪，流动单一。缺点是写起来...

    vue环境配置和项目简单的部署以及修改

    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂...

    对vue中的数据劫持/数据代理/数据观察的理解

    将数据挂载到视图上很简单，使用{{}}模板即可，那么如果要进行二次渲染、再次渲染，该怎么做呢？ 我们可以使用延迟函数 ,若要在1s之后修改数据，添加如下函数： setTimeout(function(){ vm.message=123456789; // ...

Magicbox
Global site tag (gtag.js) - Google Analytics