Detailed explanation of vue modifying the paging component view of elementUI without updating

Today, I encountered a small problem that I didn't pay attention to at ordinary times. One attribute of el-pagination paging component is current-page current page.

Today, I want to manually modify his bound variables in methods to modify the page number, but I found that the paging component view did not render, but stayed at the original page number.

Then I thought about it and remembered the syntax sugar. sync, which makes the data bind in both directions.

Look at the modified code directly

<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 thought about the specific reason for 1 time. It may be because the paging component can't inform the parent component of the view update after modifying this. currentPage, so the. sync modifier is added to enable the child component to communicate with the parent component, thus realizing bidirectional binding, and the parent component gets the updated value and renders the page again.

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

In general, the interface has data returned, but the corresponding view is not updated. There are only two situations:
1. There are errors or imprecise judgments before this data needs to be updated.
2. vue objects, arrays cannot listen deeply.

1. Check whether there is rigorous judgment and error reporting.

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

this. $set () can receive 3 parameters 1. The data to be bound to the word. 2. The name of the property to add or modify. 3. Value to assign

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

3. Manually update the view

It can affect the contents of the slot slot in this instance and in this reality

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