Detailed explanation of the problem of modifying the paging component view of elementUI without update

I encountered a small problem today and didn't pay attention to it. The el-pagination paging component has a property that is the current-page current page.

Today I want to manually modify the variables he bound in methods to achieve the effect of modifying the page number. However, I found that the pagination component view was not rendered, and it was still stuck at the original page number.

Then I thought about it and remembered the syntax sugar of .sync, allowing the data to be bound in two-way.

Just check the modified code

<el-pagination
  :="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 () {
 (1)
  = 1
}

I thought about the specific reason. It may be because of modification that the pagination component cannot notify the parent component to update the view, so the .sync modifier is added so that the child component can communicate with the parent component, thereby achieving two-way binding. The parent component obtains the updated value and re-renders the page.

element-ui interface returns data but the view is not updated

Preface: Generally speaking, the interface returns data, but the corresponding view is not updated, there are only two situations:
1. There will be errors or improper judgments before this data is updated.
Objects and arrays cannot be listened deeply.

1. Check whether there are any unrigorous judgments and errors.

2. The vue object does not allow dynamic addition of new root-level responsive attributes on the created instances. (Refer to vue official website)
If we have to do this, we can use this.$set().

This.$set() can receive three parameters 1. Data to bind the word. 2. The attribute name to add or modify. 3. Value to assign

this.$set(, 'projectName', 'chenxuemin')

3. Manually update the view

It can affect the slot slot content in this example and the reality

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

This is the article about the detailed explanation of the problem of not updating the paging component view of vue modifying elementUI. For more related contents of vue element paging component view, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!