Vue 绑定 tbody 时产生的 绑定错误问题

Vue 绑定 tbody 时有可能产生的 绑定错误问题

在使用tbody 时 其中嵌套的标签 除 tr td 以外的

任何标签 都会在页面渲染时(根据显示结果的 猜测)被生成到 table 外

除非 其包含在 tr 下的 td中

---

例如:

代码中是这么写的:

但是 实际页面 显示div 会生成到 table 外

查看页面源码则是这样的

而将其包在 tr td 中则没有此问题

这个问题跟 tbody 本身特性 有关,而其造成的后果看似并不严重,只是显示位置错误而已

但是在某些情况下,可能会造成很多误解或者BUG

例如本篇文章所指:

当然要首先声明一定前提条件
1.并不是全新页面
2.使用Vue进行新模块添加
3.页面之前并没有使用Vue 进行开发
4.页面逻辑复杂,元素众多,无法进行大规模改变

一开始向也面中加入Vue 时并未发现什么问题

代码未报错,axaj返回正常,控制台输出集合正常,Vue 中绑定对象中的值也可以拿得到

唯一问题就是 页面中 Vue 并没有正确的显示值,(Vue代码完成前也不会显示什么)

开始出现问题的时候其实就是最后一部分,循环Vue 对象时

对象值并没有被正确取出而且 其中使用的变量 也表示为原始形式 例如 {{name}}

这和未建立Vue 的时候显示效果相同

提示:

在Vue 的v-for 循环中的(注意是 中 的) {{name}} 变量,如果 for循环的对象找不到,而且正确加入了Vue 是不会显示的!!
如果没有正确加入 Vue 即使是在 for 的标签中的 {{name}} 也会显示成其原本的样子!!(可以认定为 如果显示 则代表 Vue 绑定或生成失败)

但是这次出现的问题比这个问题还要奇葩!!!

当你的 Vue 所绑定的 id 是 tbody 的id 时!!(前面说过不做大范围改动所以不会吧Vue 绑定到整个页面最外侧)

你的 Vue 会绑定到 tbody 上,而你tbody中的代码 如果没在 tr td中(不懂看上文)

则会跑到table 外面,同时也是 tbody外面,也就是跑到了你绑定Vue 的外面

所以 你的 v-for 其实是写在没有 Vue 地方而被忽略了,而其中的 {{name}} 也会显示成 其原始的 样子

这种情况下,当你看代码 发现所有地方写的都没有错时,而Vue 却都获取不到,不免会认为是其他一些因素造成的
例如: 代码冲突,框架冲突等等

只有当你查看页面中的 html 源码时你才会发现你的 v-for 跑到了 tbody 的外面

所以在这种情况下 v-for 代码的地方其实没有任何 Vue 绑定,所以也不可能有任何效果
而往往这个绑定错误 会被其他很多问题而掩盖,导致不能发现这个问题
最后可能会导致换方法写这个功能,或者导致各种问题

而且这个页面还非常复杂
1.页面极其复杂
2.旧代码极多
3.你修改的页面是页面中一个弹窗中的页面的一个分页
4.旧代码使用的框架与新的完全不相干
5.你并不会用旧的框架

例如:

红圈处就是增加的页面
这个页面当时完全不熟悉,甚至碰都没碰过时!!
不过好在这个页面只是后台页面,并没有太多的花哨的样式代码

而且一开始找源码 只是在找不出绑定问题的情况下,暂时查看错位问题
并没有想到会导致绑定出错

最后才发现因为tbody中的 div 生成到了 tbody外,而Vue绑定在 tbody 上,v-for 循环却在 div 中
导致 div中用到 Vue 的地方都显示成了源码或未找到对象,而未显示数据和循环

进而发现了 tbody 中除了 tr td和其中的元素都会被生成到 table 外

进而写出例子并记录下这个问题,然后才发现 这个问题,就因为这个特性......

好了就就先这样 ,这篇博客就是记录一下在机缘巧合 下发生的问题

最后补充一个 生成到外面的效果

好了就这么多了.....打了半天脑子都糊了,如果有用或者有意义的话 留个顶和评论吧~~~

另外我并不想吐槽这个 博客的排版,br 换行直接改成了空行...颜色也加不上....

本来放在一起的也全加上空行了.....心塞