vue中更改数组中属性,在页面中不生效的解决方法
网络编程 2021-07-04 15:02www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇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中更改数组中属性,在页面中不生效的解决方法就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程