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 换行直接改为了空行...颜色也加不上....

原本放在一块儿的也全加上空行了.....心塞