vue 鼠标滑过显示文字增加高度

需求：文字内容太长，要求鼠标滑过展示全部内容，并且高度变高

鼠标放上效果

代码：
前端：

 <li id="a" v-for="item,index in menuData" :key="index" :class="num==index?'treeCheck':''"
     @mouseenter="enters(index,item.projectName)"
     @mouseleave="leaver(index)"
     :style="mouStyle"
 >

数据类型：

//li标签的数据
menuData: [],
//动态高度
mouStyle:{
    height:''
},
//显示与隐藏的控制
switchNice:[
    //这绑定了上面V-show,
    {
        arry: true,
        arrys: false
    }
],

方法：

 enters(index,name) {
   if (!name) return ''
   	  //判断长度大于8在执行
      if (name.length > 8) {
      this.mouStyle.height = '50px'
      this.switchNice[index].arry = false; //这里的先后顺序如果写反了 就会一直闪，这是根据上面那个思路写的，
      this.switchNice[index].arrys = true; //鼠标移入 首先是A先消失，然后B再出现的，写反就会疯狂闪。
      }
  },
  leaver(index) {
      this.mouStyle.height = ''
      this.switchNice[index].arrys = false; //移出时也一样，先B消失 再出现A。
      this.switchNice[index].arry = true;
  },

注意：
switchNice 内容要和 menuData长度相同

 for (let i = 0; i < this.menuData.length; i++) {
        var arr =  {arry: true,arrys: false};
        this.switchNice.push(arr);
 }

完结撒花