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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
20个最新的jQuery插件
Jan 13 Javascript
js动态设置div的值下例子
Oct 29 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
ReactRouter的实现方法
Jan 25 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
详解php中反射的应用
2016/03/15 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
基于vue实现分页效果
2017/11/06 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
js里面的变量范围分享
2020/07/18 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
python单链表实现代码实例
2013/11/21 Python
Python写的服务监控程序实例
2015/01/31 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
俄语专业毕业生推荐信
2013/10/28 职场文书
办公室助理岗位职责
2013/12/25 职场文书
大学校庆邀请函
2014/01/11 职场文书
2013年军训通讯稿
2014/02/05 职场文书
平安工地汇报材料
2014/08/19 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis