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

写个例子
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. hive drop 报错

    执行 drop database xxxx cascade; 删除数据库的时候报错. 报错信息:Execution Error, return code 1 from org.apache.hadoo ...

  2. laravel 数据库操作(表、字段)

    1)创建表(make:migration create),例如创建 articles php artisan make:migration create_articles_table --create ...

  3. angularjs-select2的使用

    1.引入文件 '/select2.css', '/select2-bootstrap.css', '/select2.min.js', ‘/angular-select2.min.js’ 2.页面 3 ...

  4. es6 语法 (函数扩展)

    //函数参数默认值(more值后不能有参数) { function test(x,y = 'world'){ console.log('默认值',x,y); } test('hello');// he ...

  5. 吴恩达机器学习笔记 —— 19 应用举例:照片OCR(光学字符识别)

    http://www.cnblogs.com/xing901022/p/9374258.html 本章讲述的是一个复杂的机器学习系统,通过它可以看到机器学习的系统是如何组装起来的:另外也说明了一个复杂 ...

  6. Java synchronized 线程同步

    同步方法 class MyTheard4 implements Runnable{ private int ticket; public MyTheard4(int ticket) { this.ti ...

  7. leetcode-26.删除重复数组中的重复项

    leetcode-26.删除重复数组中的重复项 题意 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数 ...

  8. Anaconda管理Python环境

    Anaconda介绍 Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.Anaconda提供环境管理的功能,功能类似 Virtuale ...

  9. 使用Visual Studio Team Services持续集成(四)——使用构建运行测试

    使用Visual Studio Team Services持续集成(四)--使用构建运行测试 使用构建来运行测试来验证集成是一个很好的实践. MyHealth.API.IntegrationTests ...

  10. The server principal "sa" is not able to access the database "xxxx" under the current security context

    在SQL Server服务器上一个作业执行时,遇到下面错误信息: Message: Executed as user: dbo. The server principal "sa" ...