Vue中按条件为td单元格内容包裹链接并保留悬浮交互的问题排查

问题原因 #

• 根实例错误定义必填props
  Vue的props配置项仅适用于子组件，你直接在根实例（new Vue()创建的实例）中定义了required: true的text属性，但没有任何地方给根实例传入这个prop，会直接导致Vue初始化报错，整个实例挂载失败，所有v-if、事件绑定等逻辑全部失效。
• 缺失test=1时的展示逻辑
  你只写了v-if="test == 0"对应的a标签节点，没有加v-else分支展示纯文本内容，所以当test值为1时，td内只会剩下弹窗容器，不会显示任何文本内容。
• 插值语法错误（如果未配合后端模板）
  你在a标签内写的是@{{test}}，Vue默认的插值语法是{{变量名}}，如果你没有用后端模板（比如Laravel的blade）处理前缀@，会直接将@{{test}}作为纯文本输出，不会解析为test变量的值。
• 弹窗缺少必要样式
  你没有给悬浮弹窗#hovercard添加绝对定位、层级等必要样式，就算showCard触发为true，弹窗也不会以悬浮效果展示在预期位置。

修复后的代码示例 #

JS部分 #

<script>
new Vue({
  el: "#app",
  data: {
    timeout: null,
    showCard: false,
    isLoaded: false,
    selected: '',
    test: 0 // 测试时改成1即可看到纯文本效果
  },
  methods: {
    mouseover: function (event) {
      console.log(event.pageX, event.pageY)
      clearTimeout(this.timeout)
      var self = this
      this.timeout = setTimeout(function () {
         self.showCard = true
         setTimeout(function () {
           self.isLoaded=true;
         }, 500)
      }, 500)
    },
    mouseleave: function () {
      var self = this
      this.timeout = setTimeout(function () {
        self.showCard = false
        self.isLoaded = false
      }, 200)
    },
    cardOver: function () {
      console.log('card over')
      clearTimeout(this.timeout);
      this.showCard = true
    },
    cardLeave: function () {
      var self = this
      this.timeout = setTimeout(function () {
        self.showCard = false
        self.isLoaded = false
      }, 200)
    }
  }
});
</script>

HTML部分 #

<style>
/* 新增弹窗必要样式 */
#hovercard {
  position: absolute;
  z-index: 999;
  width: 200px;
  background: #fff;
  border: 1px solid #eee;
  padding: 10px;
  margin-top: 5px;
}
.bg.loaded {
  display: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<table id="app">
<tbody>
<td>
  <a v-if="test == 0" href="javascript:void(0)" 
         @mouseover="mouseover"
         @mouseleave="mouseleave">{{test}}
  </a>
  <!-- 新增v-else分支展示纯文本 -->
  <span v-else>{{test}}</span>
  <div id="hovercard" v-show="showCard" @mouseover="cardOver" @mouseleave="cardLeave">
    <div :class="['bg', {'loaded': isLoaded}]"></div>
    <div class="content">
      <p>Orders ready</p>
    </div>
  </div>
</td>
</tbody>
</table>

内容的提问来源于stack exchange，提问作者Geoff_S