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 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
JS实现一个简单的日历
Feb 22 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
基于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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
PHP数据类型的总结分析
2013/06/13 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
jquery获取节点名称
2015/04/26 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
js实现表格筛选功能
2017/01/18 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
JS 实现百度搜索功能
2018/02/01 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python threading的使用方法解析
2019/08/28 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
python识别验证码的思路及解决方案
2020/09/13 Python
python之随机数函数的实现示例
2020/12/30 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
青春无悔演讲稿
2014/05/08 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS