vue中更改数组中属性,在页面中不生效的解决方法


Posted in Javascript onOctober 30, 2019

问题描述:

使用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 相关文章推荐
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
小程序登录态管理的方法示例
Nov 13 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
基于JavaScript实现单例模式
Oct 30 #Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 #Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 #Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 #Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 #Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 #Javascript
vue中使用rem布局代码详解
Oct 30 #Javascript
You might like
php与php MySQL 之间的关系
2009/07/17 PHP
php中in_array函数用法分析
2014/11/15 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python对象体系深入分析
2014/10/28 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
Djang中静态文件配置方法
2015/07/30 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
详解python中各种文件打开模式
2020/01/19 Python
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
应届生英语教师求职信
2013/11/05 职场文书
班主任个人工作反思
2014/04/28 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
2014年教务工作总结
2014/12/03 职场文书
2015年采购部工作总结
2015/04/23 职场文书
创业计划书之家教托管
2019/09/25 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android