`
iaiai
  • 浏览: 2195237 次
  • 性别: 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.js中，数据绑定是基于数据响应式的，这意味着当你修改数据时，视图通常会自动更新以反映这些变化。然而，在某些情况下，当你直接修改数组元素或对象属性时，Vue可能无法检测到这些变动，导致视图不会更新。...

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

    然而，有时候在使用Vue 2或Vue 3开发时，可能会遇到一个问题：虽然页面视图已经更新，但`data`对象或`setup`函数中的数据并没有同步更新。这种情况下，开发者通常会感到困惑，因为这违背了Vue的响应式原理。 在Vue ...

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

    在Vue.js中，数据绑定是基于响应式系统的，这意味着当你修改数据时，视图会自动更新以反映这些变化。然而，对于对象来说，Vue.js只能监听到对象本身，而不是其属性。因此，当你直接添加、删除或修改对象的属性时，...

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

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

    vue视图更新问题.zip

    当你更改数据时，Vue会自动追踪依赖并触发视图更新。但有些情况下，Vue可能无法检测到数据的变化，例如： 1. **直接修改数组元素**：当你使用索引直接修改数组元素，如`arr[0] = 'new value'`，Vue不会追踪到这个...

    VUE实现静态数据的CRUD功能

    在本案例中，“VUE实现静态数据的CRUD功能”指的是利用Vue.js创建一个能够进行创建(Create)、读取(Retrieve)、更新(Update)和删除(Delete)操作的应用。这种功能通常用于管理数据库中的数据，而在这个特定场景下，...

    vue实现数据控制视图的原理解析

    在这个过程中，Vue使用了发布订阅模式，确保了数据变化到视图更新的高效且准确。 3. 计算属性与watch的区别： - **计算属性**是基于它们的依赖缓存的结果，只有当依赖变更时，计算属性才会重新求值。计算属性在模板...

    vue中的数据绑定原理的实现

    Observer(value) } return ob }Vue的数据绑定原理是其核心特性之一，它使得开发者可以方便地在视图和数据之间建立连接。在Vue中，数据绑定是通过数据劫持（Object.defineProperty）和观察者模式（Observer、Dep、...

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

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

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

    总之，Vue 的数据响应原理基于 getter 和 setter 的机制，要求我们在操作数据时遵循特定的规则，特别是对于对象和数组的修改，必须使用 Vue 提供的方法或技巧，以确保视图的正确更新。同时，使用 Vue DevTools 可以...

    vue视图不更新情况详解

    在使用Vue.js框架时，开发者可能会遇到视图不更新的问题，这通常是因为Vue的响应式系统并没有捕捉到数据的变化。在本文中，我们将探讨几个引起Vue视图不更新的常见原因，并提供相应的解决方法。 首先，Vue的响应式...

    vue2.0重新渲染数据三种方法

    在Vue2.0中，当你的应用程序数据发生变化时，Vue会自动进行视图的更新，这一过程被称为重新渲染。然而，由于JavaScript的某些特性，Vue无法自动检测到数组的某些特定变化，例如直接修改数组索引或添加/删除元素。在...

    一个无痛解决vue异步数据的插件

    比如，当你需要从服务器获取数据并赋值给data对象时，由于数据获取是异步的，Vue可能无法立即感知到变化，导致视图未能及时更新。 计算属性（computed）是Vue中处理复杂逻辑和依赖数据的工具，它们通常是同步的。...

    vue 双向数据绑定原理

    1. 属性绑定：Vue通过`v-bind`指令将属性绑定到元素，当Model中的数据发生变化时，视图会自动更新。例如，`&lt;span v-bind:title="message"&gt;&lt;/span&gt;`，这里的`message`是ViewModel中的一个数据属性。 2. 表达式绑定：...

    vue数据监听1

    在Vue中，数据绑定是一项核心特性，允许开发者实现视图与模型之间的双向通信。在本篇文章中，我们将深入探讨Vue的双向数据绑定机制，以及相关的核心概念。 Vue的双向数据绑定基于观察者模式（Observer Pattern）。...

    Vue对象赋值视图不更新问题及解决方法

    然而，在某些情况下，直接对Vue对象中的数据进行赋值可能不会触发视图的更新，导致双向绑定失效。本文将深入探讨这个问题，并提供有效的解决方案。 首先，我们要理解Vue是如何跟踪变化的。Vue使用代理（proxy）和...

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