詳解vue修改elementUI的分頁組件視圖沒更新問題
今天遇到一個小問題平時沒留意，el-pagination這個分頁組件有一個屬性是current-page當(dāng)前頁。
今天想在methods里面手動修改他綁定的變量從而達(dá)到修改頁碼的效果，結(jié)果發(fā)現(xiàn)分頁組件視圖并沒有渲染，還是停留在原本的頁碼處。
然后想了想，想起了.sync這個語法糖，讓數(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
}
具體原因我想了一下，可能是因為修改this.currentPage，分頁組件沒辦法通知父組件視圖更新，所以添加了.sync修飾符使得子組件能和父組件進(jìn)行溝通，從而實現(xiàn)雙向綁定，父組件獲取到更新后的值重新渲染頁面。
element-ui 接口返回有數(shù)據(jù)但是視圖沒有更新
前言：一般情況下，接口有數(shù)據(jù)返回，但相應(yīng)的視圖不更新，只會有兩種情況：
1.在這個數(shù)據(jù)要更新之前有報錯或者有不嚴(yán)謹(jǐn)?shù)呐袛唷?br />
2.vue 對象、數(shù)組不能深層監(jiān)聽。
一、排查有無不嚴(yán)謹(jǐn)?shù)呐袛嗪蛨箦e。
二、vue 對象不允許在已創(chuàng)建的的實例上動態(tài)添加新的根級響應(yīng)式屬性 。（參考vue官網(wǎng)）
如果非要這么做的話，我們可以使用 this.$set()。
this.$set() 可以接收三個參數(shù) 1. 要綁字的數(shù)據(jù)。 2. 要添加或修改的屬性名稱。 3. 要賦的值
this.$set(this.projectList, 'projectName', 'chenxuemin')
三、手動更新視圖
它可以影響到本實例及本實中的 slot 插槽內(nèi)容
this.$forceUpdate() // vm.$forceUpdate()
到此這篇關(guān)于詳解vue修改elementUI的分頁組件視圖沒更新問題的文章就介紹到這了,更多相關(guān)vue element分頁組件視圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了VUE頁面中加載外部HTML的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue中使用GraphQL的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vue.extend構(gòu)造器的詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
vue服務(wù)區(qū)緩存分為頁面緩存、組建緩存和接口緩存，本文通過實例代碼逐一給大家介紹，本文重點給大家介紹vue服務(wù)端渲染添加緩存的方法，感興趣的朋友跟隨小編一起看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue如何使用EasyPlayerPro實現(xiàn)播放本地MP4視頻功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
在本篇文章里小編給大家整理的是一篇關(guān)于Vue組件中使用防抖和節(jié)流實例分析內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。2021-11-11
這篇文章主要為大家詳細(xì)介紹了Vue數(shù)字輸入框組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細(xì)介紹了Vue跑馬燈marquee組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了cdn模式下vue的基本用法，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-10-10
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Vant實現(xiàn)簡單的登錄功能,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04