vue动态设置盒子的高度，设置v-for循环出来的盒子的高度

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

这四个盒子就是后台传来的数据，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";
      }
    },
  },