Vue中如何制作一个可复用的展开组件

Question

我想把这个Unfold组件做成可复用的，根据上边li的数量确定是否展开，
我想在getMore函数中把item.type传进去去判断是哪个unfold，但是组件不在循环中
该怎么办

Answer 1

已更新

<template>
  <div>
    <ul ref="test2">
      <li v-for="(item,index) in list2" :key="index">{{item}}</li>
    </ul>
    <button @click="getMore">{{unFold2?'展开':'收起'}}</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list2:[11,22,33],
        unFold2:true,
      }
    },
    methods:{
      getMore(){
        //获取全部/更多数据,这里方法很多,怎么写看个人需求
        //比如加载更多获取新的数据为[44,55,66,77,88]
        if(this.unFold2){
          for(let i of [44,55,66,77,88]){
            this.list2.push(i)
          }
        }else {
          this.list2 = this.list2.slice(0,3)
        }
        this.unFold2=!this.unFold2
      }
    }
  }
</script>

---

以往回答

1、将url上的ref设为唯一值，通过this.$refs.test1.offsetHeight获取url标签的高度
2、每个unfold通过v-show等方法分开判定是否显示
测试例子如下

<template>
  <div>
    <ul v-show="unFold1" ref="test1">
      <li v-for="(item,index) in list1" :key="index">{{item}}</li>
    </ul>
    <ul v-show="unFold2" ref="test2">
      <li v-for="(item,index) in list2" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list1:[1,2],
        list2:[11,22,33],
        unFold1:true,
        unFold2:true,
      }
    },
    mounted() {
      this.getHeight()
    },
    methods:{
      getHeight(){
        this.unFold1 = this.$refs.test1.offsetHeight>50;
        this.unFold2 = this.$refs.test2.offsetHeight>50;
      }
    }
  }
</script>

Answer 2

第一层数据结构
第二层nowList数据结构
两层v-for循环Dom结构
展开组件unfold结构