vue el-tooltip 在数据更新之后没有title 提示框显示, 需要刷新页面才有title 提示框显示

   项目中遇到一个问题,就是使用el-tooltip 包裹了一个span标签,在数据变化时,span标签的数据显示了出来,而el-tooltip 的title提示框却没有显示出来,我一开是推断可能是diff算法的问题,数据层级太深了,从而导致了数据未显示出来,然后我就给el-tooltip添加了一个key值如下代码:

 
                               
       {
    {itemChild}} 
      {
    {itemChild}}
  

   但是在项目运行了之后,我手动添加了一个数据,首页页面数据刷新显示了出来,但是当我把鼠标放上去的时候还是没有title的提示框效果.这个时候的我打开了F12的调试框,发现是数据的显示问题,如下:

   通过上图的Element中的数据对比发现,有title效果的比没有title提示框效果的多了一行代码: aria-describedby=“el-tooltip-4653” tabindex=“0”; 而没有数据也是有一个空的p标签存在,

   因为在数据变更的时候,el-tooltip标签已经存在了,变化的只是最下面的span标签所以我推断是我的 v-if 在我最底级的span标签上面的原因,只需要把判断标签放在 el-tooltip 上面即可.

 
                               
       {
    {itemChild}} 
      {
    {itemChild}}
  

   最后在运行的时候数据在新增变化,el-tooltip的弹框就可以正常的显示.
   如果有不对的地方请各位大佬留言指出,也希望大家可以互相关注学习,共同进步!!!