当前位置:   article > 正文

vue页面数组做数据置顶_vue 添加一条数据到最上面

vue 添加一条数据到最上面
  1. //置顶
  2.     async stickHonor(index) {    //index为数据当前下标
  3.       let obj = this.honorList[index];
  4.       const id = obj.id;
  5.       obj.isStick = 1;
  6.       console.log(id);
  7.       const isStick = 1;   //置顶状态
  8.       const res = await stickStudentHonors({ id,isStick });  //调用接口改变数据状态
  9.       //删除之前的位置的数据
  10.       this.honorList.splice(index, 1);
  11.       //在数组下标为0插入数据,每次置顶数据都是在最前面
  12.       this.honorList.splice(00, obj);
  13.     },
  14.     //取消置顶
  15.     async unstickHonor(index) {   //index为数据当前下标
  16.       let sum = 0;
  17.       for (let data of this.honorList) {
  18.         if (data.isStick == 1) {
  19.           sum++;
  20.         }
  21.       }
  22.       let obj = this.honorList[index];
  23.       const id = obj.id;
  24.       const isStick = 0;    //为不置顶
  25.       const res = await stickStudentHonors({ id,isStick });    //调用接口改变数据的状态
  26.       obj.isStick = 0;
  27.       //删除之前的位置的数据
  28.       this.honorList.splice(index, 1);
  29.       //置顶数据下面插入数据,因为sum把之前自己置顶的也算进去,所以sum-1
  30.       this.honorList.splice(sum-10, obj);
  31.     }

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/224028?site
推荐阅读
相关标签
  

闽ICP备14008679号