Vue 数组和对象更新,但是页面没有刷新

摘要:
使用数组时,数组的内部数据会更改,但绑定到数组的页面的数据不会更改。有三种解决方案。这一点$设置或者这个对象$设置2、 强制更新此$强制更新()

在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化。

<ul>
      <li v-for="(item,index) in todos" :key="index">{{item.name}}</li>
  </ul>

  

data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      todos: [{
        name: 'aa',
        age: 14
      }, {
        name: 'bb',
        age: 15

      }, {
        name: 'cc',
        age: 16

      }],
      obj: {name: 'lihui', age: 17}
    }
  },

  

 methods: {
    changeTodos: function () {
      var _this = this
      _this.todos[0] = {
        name: 'zhangsan',
        age: 15
      }
      console.log(this.todos)
      /*
       this.$set(this.todos, 0, 'nn')
      this.$forceUpdate()
*/
    }

  这种修改得方式,无法出发数组得set,导致页面得数据不会改变。有三种解决方式。

一、使用全局得set方法。

this.$set(this.todos,0,{name: 'zhangsan',age: 15});或者对象this.$set(this.obj,'key',value);

二,强制更新

this.$forceUpdate()

免责声明:文章转载自《Vue 数组和对象更新,但是页面没有刷新》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Like / Like table of / Like line of 区别android的多次点击事件的实现(有源码)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础

作者 | Jeskson 来源 | 达达前端小酒馆 Vue概述: MVX模式简介,Vue框架简介,Vue.js的安装与使用。 Vue基础语法: 实例对象,生命周期,模板语法,计算属性,methods方法 Vue渲染: 列表渲染,条件渲染 Vue事件与表单: 事件处理,事件对象,事件委派,表单处理 MVX模式简介:MVX框架模式:MVC+M...

java--集合框架

1.ArrayList和Vector的区别? 1.vector 的所有方法都是同步(Synchronized)的,是线程安全的(thread-safe)的,而ArrayList是线程不安全的,线程安全是会影响性能,ArrayList 比vector的性能好 2.当Vector或ArrayList元素超过初始大小时,vector会将容量翻倍,而arrayLi...

C# 集合之Dictionary详解

开讲。 我们知道Dictionary的最大特点就是可以通过任意类型的key寻找值。而且是通过索引,速度极快。 该特点主要意义:数组能通过索引快速寻址,其他的集合基本都是以此为基础进行扩展而已。 但其索引值只能是int,某些情境下就显出Dictionary的便利性了。 那么问题就来了--C#是怎么做的呢,能使其做到泛型索引。 我们关注圈中的内容,这是Dic...

vue-构建app项目

以下记录vue-cli 3构建app项目的步骤。 一、初始化配置,并运行启动app 1、安装nodeJS,git ,配置环境,Vue CLI 3.x 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。 2、安装vue-cli ,命令:npm install -g @vue/cli 3、创建项目:vue create mapp-demo 推...

vue中通过WeixinJSBridge关闭微信公众号当前页面,返回微信公众号首页

之前有个需求,点击菜单进入到微信公众号模块,然后点击返回的时候不知道到哪里去,后来觉得点返回的时候直接关闭页面,但是window.close()并不能关闭页面,然后经过查找资料,发现通过以下方法可以 setTimeout(function() { //这个可以关闭安卓系统的手机 document.addEventListener( "Wei...

学习vue结合ajax查询出后台数据

第一步:先获取后台的API 这里已经写好了后台,API是bookAction_getAllBook 第二步:创建jsp文件并导入vue.js和JQuery.js 第三步:写上Model 第四步:写上View 这时页面上的显示的数据都是写死的,这时候就需要写上ajax通过它来获取到后台的数据并把它显示出来 第五步:ajax 先把model定义成一...