詳解vue修改elementUI的分頁組件視圖沒更新問題

今天遇到一個小問題平時沒留意，el-pagination這個分頁組件有一個屬性是current-page當前頁。

今天想在methods里面手動修改他綁定的變量從而達到修改頁碼的效果，結果發現分頁組件視圖并沒有渲染，還是停留在原本的頁碼處。

然后想了想，想起了.sync這個語法糖，讓數據進行雙向綁定。

直接上修改的代碼看看

<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}

具體原因我想了一下，可能是因為修改this.currentPage，分頁組件沒辦法通知父組件視圖更新，所以添加了.sync修飾符使得子組件能和父組件進行溝通，從而實現雙向綁定，父組件獲取到更新后的值重新渲染頁面。

element-ui 接口返回有數據但是視圖沒有更新

前言：一般情況下，接口有數據返回，但相應的視圖不更新，只會有兩種情況：1.在這個數據要更新之前有報錯或者有不嚴謹的判斷。2.vue 對象、數組不能深層監聽。

一、排查有無不嚴謹的判斷和報錯。

二、vue 對象不允許在已創建的的實例上動態添加新的根級響應式屬性 。（參考vue官網）如果非要這么做的話，我們可以使用 this.$set()。

this.$set() 可以接收三個參數 1. 要綁字的數據。 2. 要添加或修改的屬性名稱。 3. 要賦的值

this.$set(this.projectList, ’projectName’, ’chenxuemin’)

三、手動更新視圖

它可以影響到本實例及本實中的 slot 插槽內容

this.$forceUpdate() // vm.$forceUpdate()

到此這篇關于詳解vue修改elementUI的分頁組件視圖沒更新問題的文章就介紹到這了,更多相關vue element分頁組件視圖內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！