当前位置 主页 > 网站技术 > 代码类 >

    Vue 数组和对象更新,但是页面没有刷新的解决方式

    栏目:代码类 时间:2019-11-09 21:07

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

    <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 数组和对象更新,但是页面没有刷新的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持IIS7站长之家。