資訊專欄INFORMATION COLUMN
摘要：綁定時(shí)有可能產(chǎn)生的綁定錯(cuò)誤問(wèn)題在使用時(shí)其中嵌套的標(biāo)簽除以外的任何標(biāo)簽都會(huì)在頁(yè)面渲染時(shí)根據(jù)顯示結(jié)果的猜測(cè)被生成到外除非其包含在下的中例如代碼中是這么寫的但是實(shí)際頁(yè)面顯示會(huì)生成到外查看頁(yè)面源碼則是這樣的而將其包在中則沒(méi)有此問(wèn)題這個(gè)問(wèn)題跟本身特性
Vue 綁定 tbody 時(shí)有可能產(chǎn)生的 綁定錯(cuò)誤問(wèn)題
在使用tbody 時(shí) 其中嵌套的標(biāo)簽 除 tr td 以外的
任何標(biāo)簽 都會(huì)在頁(yè)面渲染時(shí)(根據(jù)顯示結(jié)果的 猜測(cè))被生成到 table 外
除非 其包含在 tr 下的 td中
例如:
代碼中是這么寫的:
但是 實(shí)際頁(yè)面 顯示div 會(huì)生成到 table 外
查看頁(yè)面源碼則是這樣的
而將其包在 tr td 中則沒(méi)有此問(wèn)題
這個(gè)問(wèn)題跟 tbody 本身特性 有關(guān),而其造成的后果看似并不嚴(yán)重,只是顯示位置錯(cuò)誤而已
但是在某些情況下,可能會(huì)造成很多誤解或者BUG
例如本篇文章所指:
當(dāng)然要首先聲明一定前提條件
1.并不是全新頁(yè)面
2.使用Vue進(jìn)行新模塊添加
3.頁(yè)面之前并沒(méi)有使用Vue 進(jìn)行開(kāi)發(fā)
4.頁(yè)面邏輯復(fù)雜,元素眾多,無(wú)法進(jìn)行大規(guī)模改變
一開(kāi)始向也面中加入Vue 時(shí)并未發(fā)現(xiàn)什么問(wèn)題
代碼未報(bào)錯(cuò),axaj返回正常,控制臺(tái)輸出集合正常,Vue 中綁定對(duì)象中的值也可以拿得到
唯一問(wèn)題就是 頁(yè)面中 Vue 并沒(méi)有正確的顯示值,(Vue代碼完成前也不會(huì)顯示什么)
開(kāi)始出現(xiàn)問(wèn)題的時(shí)候其實(shí)就是最后一部分,循環(huán)Vue 對(duì)象時(shí)
對(duì)象值并沒(méi)有被正確取出而且 其中使用的變量 也表示為原始形式 例如 {{name}}
這和未建立Vue 的時(shí)候顯示效果相同
提示:
在Vue 的v-for 循環(huán)中的(注意是 中 的) {{name}} 變量,如果 for循環(huán)的對(duì)象找不到,而且正確加入了Vue 是不會(huì)顯示的!!
如果沒(méi)有正確加入 Vue 即使是在 for 的標(biāo)簽中的 {{name}} 也會(huì)顯示成其原本的樣子!!(可以認(rèn)定為 如果顯示 則代表 Vue 綁定或生成失敗)
但是這次出現(xiàn)的問(wèn)題比這個(gè)問(wèn)題還要奇葩!!!
當(dāng)你的 Vue 所綁定的 id 是 tbody 的id 時(shí)!!(前面說(shuō)過(guò)不做大范圍改動(dòng)所以不會(huì)吧Vue 綁定到整個(gè)頁(yè)面最外側(cè))
你的 Vue 會(huì)綁定到 tbody 上,而你tbody中的代碼 如果沒(méi)在 tr td中(不懂看上文)
則會(huì)跑到table 外面,同時(shí)也是 tbody外面,也就是跑到了你綁定Vue 的外面
所以 你的 v-for 其實(shí)是寫在沒(méi)有 Vue 地方而被忽略了,而其中的 {{name}} 也會(huì)顯示成 其原始的 樣子
這種情況下,當(dāng)你看代碼 發(fā)現(xiàn)所有地方寫的都沒(méi)有錯(cuò)時(shí),而Vue 卻都獲取不到,不免會(huì)認(rèn)為是其他一些因素造成的
例如: 代碼沖突,框架沖突等等
只有當(dāng)你查看頁(yè)面中的 html 源碼時(shí)你才會(huì)發(fā)現(xiàn)你的 v-for 跑到了 tbody 的外面
所以在這種情況下 v-for 代碼的地方其實(shí)沒(méi)有任何 Vue 綁定,所以也不可能有任何效果
而往往這個(gè)綁定錯(cuò)誤 會(huì)被其他很多問(wèn)題而掩蓋,導(dǎo)致不能發(fā)現(xiàn)這個(gè)問(wèn)題
最后可能會(huì)導(dǎo)致?lián)Q方法寫這個(gè)功能,或者導(dǎo)致各種問(wèn)題
而且這個(gè)頁(yè)面還非常復(fù)雜
1.頁(yè)面極其復(fù)雜
2.舊代碼極多
3.你修改的頁(yè)面是頁(yè)面中一個(gè)彈窗中的頁(yè)面的一個(gè)分頁(yè)
4.舊代碼使用的框架與新的完全不相干
5.你并不會(huì)用舊的框架
例如:
紅圈處就是增加的頁(yè)面
這個(gè)頁(yè)面當(dāng)時(shí)完全不熟悉,甚至碰都沒(méi)碰過(guò)時(shí)!!
不過(guò)好在這個(gè)頁(yè)面只是后臺(tái)頁(yè)面,并沒(méi)有太多的花哨的樣式代碼
而且一開(kāi)始找源碼 只是在找不出綁定問(wèn)題的情況下,暫時(shí)查看錯(cuò)位問(wèn)題
并沒(méi)有想到會(huì)導(dǎo)致綁定出錯(cuò)
最后才發(fā)現(xiàn)因?yàn)閠body中的 div 生成到了 tbody外,而Vue綁定在 tbody 上,v-for 循環(huán)卻在 div 中
導(dǎo)致 div中用到 Vue 的地方都顯示成了源碼或未找到對(duì)象,而未顯示數(shù)據(jù)和循環(huán)
進(jìn)而發(fā)現(xiàn)了 tbody 中除了 tr td和其中的元素都會(huì)被生成到 table 外
進(jìn)而寫出例子并記錄下這個(gè)問(wèn)題,然后才發(fā)現(xiàn) 這個(gè)問(wèn)題,就因?yàn)檫@個(gè)特性......
好了就就先這樣 ,這篇博客就是記錄一下在機(jī)緣巧合 下發(fā)生的問(wèn)題
最后補(bǔ)充一個(gè) 生成到外面的效果
好了就這么多了.....打了半天腦子都糊了,如果有用或者有意義的話 留個(gè)頂和評(píng)論吧~~~
另外我并不想吐槽這個(gè) 博客的排版,br 換行直接改成了空行...顏色也加不上....
本來(lái)放在一起的也全加上空行了.....心塞
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50381.html
摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁(yè)的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見(jiàn)的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時(shí)也將對(duì)filter功能與computed屬性進(jìn)行對(duì)比，說(shuō)明各自的適用場(chǎng)景，也為vue2.0版本中即將刪除的部...
摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁(yè)的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見(jiàn)的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時(shí)也將對(duì)filter功能與computed屬性進(jìn)行對(duì)比，說(shuō)明各自的適用場(chǎng)景，也為vue2.0版本中即將刪除的部...
摘要：使用組件全局定義組件，第一個(gè)參數(shù)是組件名，的值是組件的內(nèi)容這是個(gè)待辦項(xiàng)實(shí)例化是必須的，要把使用組件的區(qū)域交給管理局部注冊(cè)組件局部注冊(cè)組件全局注冊(cè)往往是不夠理想的。目錄 上節(jié)內(nèi)容回顧 組件 什么是組件 組件注冊(cè) 全局注冊(cè)組件 局部注冊(cè)組件 ...
摘要：?jiǎn)栴}出現(xiàn)的場(chǎng)景是使用組件，但是該組件沒(méi)有自帶的編輯功能，所以需要自己處理在行內(nèi)編輯的效果。需要注意一點(diǎn)，我們?cè)谑褂媒壎ㄊ录臅r(shí)候，重復(fù)的事件是不會(huì)被清除的，而是會(huì)累加，所以，在中重新添加事件之前，需要將之前的先清除。 問(wèn)題出現(xiàn)的場(chǎng)景是：使用dataTables組件，但是該組件沒(méi)有自帶的編輯功能，所以需要自己處理table在行內(nèi)編輯的效果。 目標(biāo)效果是：1.當(dāng)hover到當(dāng)前tr的時(shí)候，...
摘要：前言最近碰到這樣一個(gè)項(xiàng)目，業(yè)務(wù)邏輯全部都搬到前端，后端只提供。渲染數(shù)據(jù)，用最原始的方法對(duì)代碼拼接。拼接好數(shù)據(jù)之后再一口氣進(jìn)事先在方法緩存好的對(duì)象里。最后這樣子的寫法我覺(jué)得還是比較方便維護(hù)的。 前言 最近碰到這樣一個(gè)項(xiàng)目，業(yè)務(wù)邏輯全部都搬到前端，后端只提供API。但是是在已有的項(xiàng)目上面做這樣做，也就是在已有的項(xiàng)目上添加模塊，這個(gè)模塊采用前后端分工的方式來(lái)做。因?yàn)楦鞣N原因，所以只有 jqu...
閱讀 2189·2020-06-12 14:26
閱讀 2493·2019-08-29 16:41
閱讀 1891·2019-08-29 15:28
閱讀 2460·2019-08-26 13:43
閱讀 760·2019-08-26 13:37
閱讀 2782·2019-08-23 18:13
閱讀 2807·2019-08-23 15:31
閱讀 1023·2019-08-23 14:10
