Vue modifies the paged component view of elementui, and there is no update problem

Time:2021-7-23

Today, I encountered a small problem that I didn’t pay attention to. El pagination has a property of current page.
Today, I want to manually modify the bound variables in methods to achieve the effect of page number modification. I found that the paging component view did not render, but remained at the original page number.
After thinking about it, I think of the syntax sugar. Sync, which enables data to be bound Bi directionally.


Look directly at the modified code

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

I think about the specific reason. Maybe it’s because the paging component can’t inform the parent component of the view update by modifying this.currentpage, so the. Sync modifier is added to enable the child component to communicate with the parent component, so as to achieve bidirectional binding. The parent component gets the updated value to render the page again.
(I don’t understand very well. I guess there are some mistakes that can be pointed out in the comments