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 換行直接改爲了空行...顏色也加不上....

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