vue中更改数组中属性在页面中不生效怎么解决

本文小编为大家详细介绍“vue中更改数组中属性在页面中不生效怎么解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue中更改数组中属性在页面中不生效怎么解决”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

问题描述：

使用vue的方法获取了数组数据，获取数据后为每个数据增加edit属性，初始值均为false，其目的是为了当点击列表中的编辑按钮时，控制保存与不保存的按钮的出现与消失，结果当更改数组中的edit属性后，页面并没有如预期的那样当edit为true时页面显示更改状态，当edit为false时为不更改状态

解决方案：

edit是在通过post方法获取数据后增加到vue的data数据中的属性，一开始我的做法先将接收到的数据赋值到vue的data中，再对vue的data中的数据增加edit属性，这样在改变edit的之后，虽然在js中使用console.log可以看到该值已经发生变化，但页面中的data值并没有发生变化。

正确的做法应该是先为接收到的数据初始化edit属性，再将处理后的数据赋值给vue的data。

代码如下

<tbody>
     <tr v-for="(book,index) in bookList">
      <td>
       <span v-on:click="book.edit=true" v-show=" !book.edit">{{book.orderIndex}}</span> //如果edit属性为false，则该span出现
       <input v-show="book.edit" /> //如果edit属性为true，则该input出现
      </td>
      <td>
       <a v-show="book.edit" v-on:click="book.edit=false" class="btn btn-primary btn-sm"> //如果edit属性为true，出现不保存(x)按钮
        <i class="glyphicon glyphicon-remove" aria-hidden="true"></i>
</a>
       <a v-show="book.edit" v-on:click="save(book)" class="btn btn-primary btn-sm"> //如果edit属性为true，出现保存(√)按钮
        <i class="glyphicon glyphicon-ok" aria-hidden="true"></i>
       </a>
      </td>
      
     </tr>
    </tbody>

<script>

var politics = new Vue({

el:"#politics",

data:{

bookList:[]

},

methods:{

getBookList: function (offset, limit, CatalogueID, searchKey, resId) {
    this.limit = limit;
    this.offset = offset;
    this.CatalogueID = CatalogueID;
    this.searchKey = searchKey;
    this.resId = resId;
    this.$http.get("/BookAdmin/getBookList?offset=" + this.offset + "&limit=" + this.limit + "&CatalogueID=" + this.CatalogueID + "&searchKey=" + this.searchKey+"&resId="+this.resId)
     .then(function (resp) {
      resp.data.books.forEach(function (o, i) {
       o.edit = false;
      })
      this.bookList = resp.data.books; // 赋值必须写在属性初始化的后面，否则改edit不能使页面属性变化
      this.bookTotalCount = resp.data.totalCount;
      var pageNo = this.offset / this.limit + 1;
      var totalPage = Math.ceil(this.bookTotalCount / this.limit);
      
      divpager(pageNo, totalPage, this.bookTotalCount, this.CatalogueID, this.searchKey, this.resId);
     })
   }

}

})


</script>

读到这里，这篇“vue中更改数组中属性在页面中不生效怎么解决”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。