資訊專欄INFORMATION COLUMN
摘要：綁定時有可能產生的綁定錯誤問題在使用時其中嵌套的標簽除以外的任何標簽都會在頁面渲染時根據顯示結果的猜測被生成到外除非其包含在下的中例如代碼中是這么寫的但是實際頁面顯示會生成到外查看頁面源碼則是這樣的而將其包在中則沒有此問題這個問題跟本身特性
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 換行直接改成了空行...顏色也加不上....
本來放在一起的也全加上空行了.....心塞
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50381.html
摘要：基礎布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數據的。這也是前瞻發布之后，提出廢棄部分功能后許多人反應較為強烈的原因。 與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續從一種常見的功能——表格入手，展示Vue.js中的一些優雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...
摘要：基礎布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數據的。這也是前瞻發布之后，提出廢棄部分功能后許多人反應較為強烈的原因。 與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續從一種常見的功能——表格入手，展示Vue.js中的一些優雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...
摘要：使用組件全局定義組件，第一個參數是組件名，的值是組件的內容這是個待辦項實例化是必須的，要把使用組件的區域交給管理局部注冊組件局部注冊組件全局注冊往往是不夠理想的。目錄 上節內容回顧 組件 什么是組件 組件注冊 全局注冊組件 局部注冊組件 ...
摘要：問題出現的場景是使用組件，但是該組件沒有自帶的編輯功能，所以需要自己處理在行內編輯的效果。需要注意一點，我們在使用綁定事件的時候，重復的事件是不會被清除的，而是會累加，所以，在中重新添加事件之前，需要將之前的先清除。 問題出現的場景是：使用dataTables組件，但是該組件沒有自帶的編輯功能，所以需要自己處理table在行內編輯的效果。 目標效果是：1.當hover到當前tr的時候，...
摘要：前言最近碰到這樣一個項目，業務邏輯全部都搬到前端，后端只提供。渲染數據，用最原始的方法對代碼拼接。拼接好數據之后再一口氣進事先在方法緩存好的對象里。最后這樣子的寫法我覺得還是比較方便維護的。 前言 最近碰到這樣一個項目，業務邏輯全部都搬到前端，后端只提供API。但是是在已有的項目上面做這樣做，也就是在已有的項目上添加模塊，這個模塊采用前后端分工的方式來做。因為各種原因，所以只有 jqu...
閱讀 2171·2020-06-12 14:26
閱讀 2477·2019-08-29 16:41
閱讀 1885·2019-08-29 15:28
閱讀 2448·2019-08-26 13:43
閱讀 753·2019-08-26 13:37
閱讀 2773·2019-08-23 18:13
閱讀 2791·2019-08-23 15:31
閱讀 1014·2019-08-23 14:10
