关于这个问题,官网上说的很清楚官方文档 

写个例子
HTML
<body>
<div class="box">
<div v-for="aa in aas">{{aa}}</div>
<button @click="change">变数据 </button>
</div>
</body>

js
var vm = new Vue({
el:".box",
data:{
aas:["ss","ddd","fff","bbb"]
},
methods:{
      change(){
      // 点击按钮时,改变aas的最后一个元素,
      // 数据变了 但是view没有更新
      this.aas[3] = 444;
    }
  }
})

为什么
因为vue实现双向数据绑定的机制是数据劫持,也就是在所有对象上有个Object.defineProperty()方法,通过监听set,get方法去实现,而数组没有这两个方法,所以就不会更新view;解决方案就是,需要我们主动通知vue;

解决方案1
methods:{
    change(){
    this.aas[3] = 444;
    // 在vm实例上通知
    vm.$set(this.aas,3,444)
  }
}
解决方案2
methods:{
    change(){
    this.aas[3] = 444;
    // 在全局对象上通知
    Vue.set(this.aas,3,444)
  }
}
解决方案3
methods:{
  change(){
    // vue本身可以监听到数组的一些方法,例如:
    // push(),pop(),shift(),unshift(),splice(),sort(),reverse()
    this.aas.splice(3,1,"444");
  }
}

												

vue数据绑定数组,改变元素时不更新view问题的更多相关文章

  1. vue中,对象数组多层嵌套时,更新数据更新页面

    vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...

  2. vue 数组push元素 视图没更新

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 问题描 ...

  3. problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题

    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...

  4. Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

    一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...

  5. Vue使用v-for显示列表时,数组里的item数据更新,视图中列表不同步更新的解决方法

    由于初始化类型错误导致的不更新,代码是这样的: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. Vue 嵌套数组 数组更新视图不更新

    关于Vue的响应式原理,可以看官方文档或其他资料, https://www.jianshu.com/p/34de360d6035 data里定义了一个数组arr,数组的元素可以是同样格式的数组arrC ...

  7. vue 改变数据DOM不更新,获取不到DOM的解决方法

    1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...

  8. vue中数组变动更新检测

    Vue 包含两种观察数组的方法分别如下 1.变异方法 顾名思义,变异方法会改变被这些方法调用的原始数组,它们也将会触发视图更新,这些方法如下 push() pop() shift() unshift( ...

  9. vue操作数组时遇到的坑

    用vue操作数组时,一般就那几个方法,而且是可以渲染的,但是有时候列表是渲染不了的先说下操作数组的几个方法吧 1 push ( ) 这个方法是在数组的最后面添加元素 用法:  括号里写需要加入的元素  ...

随机推荐

  1. spring_06装配bean_2

    一.前言 1.自动装配尽量不要用,不如使用set明确 二. 通过构造函数注入值(Bean中可以没有get,set方法) <bean id="emp" class=" ...

  2. python网络编程-udp

    目录 1. 创建socket 2. udp网络程序-发送数据 3. udp网络程序-接收数据 4. python3中的编码转换 5. udp端口绑定 1. 创建socket 在 Python 中 使用 ...

  3. hihoCoder编程练习赛49

    题目1 : 相似颜色 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在CSS中我们可以用井号(#)加6位十六进制数表示一种颜色,例如#000000是黑色,#ff0000 ...

  4. mybatis加载属性

    1): <dataSource>的<property>标签加载属性 在 properties 元素体内定义的属性首先被读取 然后会读取 properties 元素中 resou ...

  5. js 控制超出字数显示省略号

    //多余显示省略号 function wordlimit(cname, wordlength) { var cname = document.getElementsByClassName(cname) ...

  6. layui layer select 选择被遮挡

    在编程的时候, layer弹窗中的select 经常会遇到被遮挡的情况: 解决方法:在页面里面找到对应div的class 给overflow新的属性visible即可(默认值.内容不会被修剪,会呈现在 ...

  7. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  8. 在Win32程序中嵌入Edge浏览器组件

    代码未经测试,只做个记录 据说只是改了UA. 在注册表修改这个路径,并且把自己程序添加进去,写一个浏览器控件的版本号,只要高于12000就自动改为Edge. For 64bit application ...

  9. android adb 流程原理代码分析(一)

    由于要用到adb的知识,但是对adb啥也不了解,看了下android的代码,adb的源码在system/core/adb下面,然后网上搜下了资料,发现很多大神的源码分析,瞬间信心爆棚,把大神写的博客都 ...

  10. Spark性能优化【Stack Overflow】

    一.异常情况 Stack Overflow 二.异常分析 之所以会产生Stack Overflow,原因是在Stack方法栈中方法的调用链条太长的原因导致的,一般情况有两种: 1.过于深度的递归[常见 ...