快捷導(dǎo)航

詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題

更新時(shí)間：2020年11月13日 14:24:58 作者：rirmk

這篇文章主要介紹了詳解vue修改elementUI的分頁(yè)組件視圖沒(méi)更新問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

今天遇到一個(gè)小問(wèn)題平時(shí)沒(méi)留意，el-pagination這個(gè)分頁(yè)組件有一個(gè)屬性是current-page當(dāng)前頁(yè)。

今天想在methods里面手動(dòng)修改他綁定的變量從而達(dá)到修改頁(yè)碼的效果，結(jié)果發(fā)現(xiàn)分頁(yè)組件視圖并沒(méi)有渲染，還是停留在原本的頁(yè)碼處。

然后想了想，想起了.sync這個(gè)語(yǔ)法糖，讓數(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，分頁(yè)組件沒(méi)辦法通知父組件視圖更新，所以添加了.sync修飾符使得子組件能和父組件進(jìn)行溝通，從而實(shí)現(xiàn)雙向綁定，父組件獲取到更新后的值重新渲染頁(yè)面。

element-ui 接口返回有數(shù)據(jù)但是視圖沒(méi)有更新

前言：一般情況下，接口有數(shù)據(jù)返回，但相應(yīng)的視圖不更新，只會(huì)有兩種情況：
1.在這個(gè)數(shù)據(jù)要更新之前有報(bào)錯(cuò)或者有不嚴(yán)謹(jǐn)?shù)呐袛唷?br /> 2.vue 對(duì)象、數(shù)組不能深層監(jiān)聽(tīng)。

一、排查有無(wú)不嚴(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的分頁(yè)組件視圖沒(méi)更新問(wèn)題的文章就介紹到這了,更多相關(guān)vue element分頁(yè)組件視圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: