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 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
Vue extend的基本用法(实例详解)
Dec 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 动态随机生成验证码类代码
2010/04/09 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php简单实现快速排序的方法
2015/04/04 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
详解javascript遍历方式
2015/11/11 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
python中__slots__用法实例
2015/06/04 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
一套英文Java笔试题面试题
2016/04/21 面试题
平面设计自荐信
2013/10/07 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
洗发水广告词
2014/03/13 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
校园环保标语
2014/06/13 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
幼师小班个人总结
2015/02/12 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书