摘要：绑定时有可能产生的绑定错误问题在使用时其中嵌套的标签除以外的任何标签都会在页面渲染时根据显示结果的猜测被生成到外除非其包含在下的中例如代码中是这么写的但是实际页面显示会生成到外查看页面源码则是这样的而将其包在中则没有此问题这个问题跟本身特性
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 换行直接改成了空行...颜色也加不上....
本来放在一起的也全加上空行了.....心塞
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50381.html
摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。 与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...
摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。 与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...
摘要：使用组件全局定义组件，第一个参数是组件名，的值是组件的内容这是个待办项实例化是必须的，要把使用组件的区域交给管理局部注册组件局部注册组件全局注册往往是不够理想的。目录 上节内容回顾 组件 什么是组件 组件注册 全局注册组件 局部注册组件 ...
摘要：问题出现的场景是使用组件，但是该组件没有自带的编辑功能，所以需要自己处理在行内编辑的效果。需要注意一点，我们在使用绑定事件的时候，重复的事件是不会被清除的，而是会累加，所以，在中重新添加事件之前，需要将之前的先清除。 问题出现的场景是：使用dataTables组件，但是该组件没有自带的编辑功能，所以需要自己处理table在行内编辑的效果。 目标效果是：1.当hover到当前tr的时候，...
摘要：前言最近碰到这样一个项目，业务逻辑全部都搬到前端，后端只提供。渲染数据，用最原始的方法对代码拼接。拼接好数据之后再一口气进事先在方法缓存好的对象里。最后这样子的写法我觉得还是比较方便维护的。 前言 最近碰到这样一个项目，业务逻辑全部都搬到前端，后端只提供API。但是是在已有的项目上面做这样做，也就是在已有的项目上添加模块，这个模块采用前后端分工的方式来做。因为各种原因，所以只有 jqu...
阅读 2127·2020-06-12 14:26
阅读 2442·2019-08-29 16:41
阅读 1832·2019-08-29 15:28
阅读 2423·2019-08-26 13:43
阅读 727·2019-08-26 13:37
阅读 2732·2019-08-23 18:13
阅读 2752·2019-08-23 15:31
阅读 984·2019-08-23 14:10
