vue 展开、收起

<div style="width:700px;height:500px;border:1px solid #000">
      <div
        v-for="(item,index1) in textArr"
        ref="bussinessTypeRef"
        :key="index1"
        :class="[item.isshow2?'':'more']"
        class="mHeight cl"
      >
        <span>{{ item.name }}</span>
        <span
          :class="[item.isshow?'isshow':'noshow']"
          style="color:red"
          @click="getMore(index1)"
        >{{ item.isshow2?'展开':'收起' }}</span>
      </div>
    </div>

data(){
  return {
    textArr: [{ isshow2: true, name: '夜，结束了一天的喧嚣后安静下来，伴随着远处路灯那微弱的光。风，毫无预兆地席卷整片旷野，撩动人的思绪万千。星，遥遥地挂在天空之中，闪烁着它那微微星光，不如阳光般灿烂却如花儿般如痴如醉', isshow: false }, { isshow2: true, name: '欲将沉醉换悲凉，清歌莫断肠', isshow: false }, { name: '这混乱的尘世，究竟充斥了多少绝望和悲伤。你想去作一个勇敢的男子，为爱，为信仰，轰轰烈烈的奋斗一场。你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声，你是那样高傲孤洁的男子。你的一寸狂心未说，已经几度黄昏雨。', isshow: false, isshow2: true }]
  }
}

mounted(){
this.projectType()
}
methods:{
getMore(index) {
      console.log(index)
      console.log(this.textArr[index].isshow2)
      this.textArr[index].isshow2 = !this.textArr[index].isshow2
    },
projectType: function() {
      this.$nextTick(function() {
        const cur = this.$refs['bussinessTypeRef']
        console.log(cur)
        for (var i = 0; i < cur.length; i++) {
          if (cur[i].clientWidth === cur[i].scrollWidth) {
            console.log(cur[i].clientWidth, cur[i].scrollWidth)
            this.textArr[i].isshow = false
          } else {
            this.textArr[i].isshow = true
          }
        }
        console.log(this.textArr)
      })
    },
}

.isshow {
  display: block;
}
.noshow {
  display: none;
}

.mHeight {
  height: 50px;
}
.cl {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.more {
  white-space: normal !important;
  height: auto !important;
}