最近有一个功能需求是点击某个循环出来的按钮,使当前点击的这个盒子的高度变高,以显示更多内容

在这里插入图片描述
这四个盒子就是后台传来的数据,v-for出来的

问题:如何点击当前盒子中的查看更多按钮,只改变当前盒子的高度,并且不影响其他盒子的高度

方法:1.动态往后台返回的数组中的每一个对象添加一个属性,在mounted里面设置

mounted() {
    this.machineList.forEach((item) => {
      //动态向machineList中每个对象添加autoHeight属性 
      this.$set(item, "autoHeight", "1.8rem");
    });
  },

2.给每一个查看更多的按钮添加点击事件并且传入参数,参数为当前盒子的index值

 		<img
            src="../assets/orderManage/btn_chakangengduo2@2x.png"
            alt=""
            class="see-more"
            @click="seeMore(index)"
          />

3.编写切换高度的函数1.8rem为初始高度,5rem为你希望点击后的高度,index为了确定你当前点击的是哪个盒子

methods: {
    seeMore(i) {
      if (this.machineList[i].autoHeight == "1.8rem") {
        this.machineList[i].autoHeight = "5rem";
      } else {
        this.machineList[i].autoHeight = "1.8rem";
      }
    },
  },

请添加图片描述

Logo

前往低代码交流专区

更多推荐