这篇文章主要介绍“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是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
到此，关于“vue更改数组属性在页面中不生效如何解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
