博客
关于我
vue页面数组做数据置顶
阅读量:529 次
发布时间:2019-03-08

本文共 953 字,大约阅读时间需要 3 分钟。

//置顶    async stickHonor(index) {    //index为数据当前下标      let obj = this.honorList[index];      const id = obj.id;      obj.isStick = 1;      console.log(id);      const isStick = 1;   //置顶状态      const res = await stickStudentHonors({ id,isStick });  //调用接口改变数据状态      //删除之前的位置的数据      this.honorList.splice(index, 1);      //在数组下标为0插入数据,每次置顶数据都是在最前面      this.honorList.splice(0, 0, obj);    },    //取消置顶    async unstickHonor(index) {   //index为数据当前下标      let sum = 0;      for (let data of this.honorList) {        if (data.isStick == 1) {          sum++;        }      }      let obj = this.honorList[index];      const id = obj.id;      const isStick = 0;    //为不置顶      const res = await stickStudentHonors({ id,isStick });    //调用接口改变数据的状态      obj.isStick = 0;      //删除之前的位置的数据      this.honorList.splice(index, 1);      //置顶数据下面插入数据,因为sum把之前自己置顶的也算进去,所以sum-1      this.honorList.splice(sum-1, 0, obj);    }

   因为splice()方法为vue数组的响应式方法,所以会自动刷新数据

转载地址:http://ffviz.baihongyu.com/

你可能感兴趣的文章
Nginx 的配置文件中的 keepalive 介绍
查看>>
Nginx 结合 consul 实现动态负载均衡
查看>>
Nginx 负载均衡与权重配置解析
查看>>
Nginx 负载均衡详解
查看>>
nginx 配置 单页面应用的解决方案
查看>>
nginx 配置https(一)—— 自签名证书
查看>>
nginx 配置~~~本身就是一个静态资源的服务器
查看>>
Nginx 配置清单(一篇够用)
查看>>
Nginx 配置解析:从基础到高级应用指南
查看>>
nginx+php的搭建
查看>>
nginx+tomcat+memcached
查看>>
nginx+Tomcat性能监控
查看>>
nginx+uwsgi+django
查看>>
Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
查看>>
nginx-vts + prometheus 监控nginx
查看>>
Nginx下配置codeigniter框架方法
查看>>
Nginx之二:nginx.conf简单配置(参数详解)
查看>>
Nginx代理websocket配置(解决websocket异常断开连接tcp连接不断问题)
查看>>
Nginx代理初探
查看>>
nginx代理地图服务--离线部署地图服务(地图数据篇.4)
查看>>