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