詳解vue修改elementUI的分頁組件視圖沒更新問題
今天遇到一個(gè)小問題平時(shí)沒留意,el-pagination這個(gè)分頁組件有一個(gè)屬性是current-page當(dāng)前頁。
今天想在methods里面手動(dòng)修改他綁定的變量從而達(dá)到修改頁碼的效果,結(jié)果發(fā)現(xiàn)分頁組件視圖并沒有渲染,還是停留在原本的頁碼處。
然后想了想,想起了.sync這個(gè)語法糖,讓數(shù)據(jù)進(jìn)行雙向綁定。
直接上修改的代碼看看
<el-pagination :current-page.sync='currentPage' :page-sizes='[10, 30, 50]' :page-size='pageSize' :total='total' layout='total, sizes, prev, pager, next, jumper' @size-change='handleSizeChange' @current-change='handleCurrentChange'/>refresh () { this.handleCurrentChange(1) this.currentPage = 1}
具體原因我想了一下,可能是因?yàn)樾薷膖his.currentPage,分頁組件沒辦法通知父組件視圖更新,所以添加了.sync修飾符使得子組件能和父組件進(jìn)行溝通,從而實(shí)現(xiàn)雙向綁定,父組件獲取到更新后的值重新渲染頁面。
element-ui 接口返回有數(shù)據(jù)但是視圖沒有更新
前言:一般情況下,接口有數(shù)據(jù)返回,但相應(yīng)的視圖不更新,只會(huì)有兩種情況:1.在這個(gè)數(shù)據(jù)要更新之前有報(bào)錯(cuò)或者有不嚴(yán)謹(jǐn)?shù)呐袛唷?.vue 對(duì)象、數(shù)組不能深層監(jiān)聽。
一、排查有無不嚴(yán)謹(jǐn)?shù)呐袛嗪蛨?bào)錯(cuò)。
二、vue 對(duì)象不允許在已創(chuàng)建的的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性 。(參考vue官網(wǎng))如果非要這么做的話,我們可以使用 this.$set()。
this.$set() 可以接收三個(gè)參數(shù) 1. 要綁字的數(shù)據(jù)。 2. 要添加或修改的屬性名稱。 3. 要賦的值
this.$set(this.projectList, ’projectName’, ’chenxuemin’)
三、手動(dòng)更新視圖
它可以影響到本實(shí)例及本實(shí)中的 slot 插槽內(nèi)容
this.$forceUpdate() // vm.$forceUpdate()
到此這篇關(guān)于詳解vue修改elementUI的分頁組件視圖沒更新問題的文章就介紹到這了,更多相關(guān)vue element分頁組件視圖內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. XML入門的常見問題(三)2. XML基本概念XPath、XSLT與XQuery函數(shù)介紹3. WML的簡(jiǎn)單例子及編輯、測(cè)試方法第1/2頁4. el-input無法輸入的問題和表單驗(yàn)證失敗問題解決5. 關(guān)于html嵌入xml數(shù)據(jù)島如何穿過樹形結(jié)構(gòu)關(guān)系的問題6. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)7. 不要在HTML中濫用div8. vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解9. XML入門的常見問題(四)10. 前端html+css實(shí)現(xiàn)動(dòng)態(tài)生日快樂代碼
