vue 수정 elementUI의 페이지 구성 요소 보기에 업데이트 문제가 없습니다.

오늘 작은 문제에 부딪혔는데 평소에 주의하지 않았습니다.el-pagination 이 페이지 구성 요소의 속성은current-page 현재 페이지입니다.
오늘 methods에서 그가 연결된 변수를 수동으로 수정하여 페이지 번호를 수정하는 효과를 얻으려고 했는데, 페이지 구성 요소의 보기가 렌더링되지 않았는지, 아니면 원래의 페이지 번호에 머물러 있는 것을 발견하였다.
그리고 생각해 보니 생각났다.sync 이 문법 설탕은 데이터를 양방향으로 연결합니다.
수정된 코드를 직접 올라가 보세요.

<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 수식자는 하위 구성 요소가 부모 구성 요소와 소통할 수 있도록 하여 양방향 연결을 실현하고, 부모 구성 요소는 업데이트된 값을 가져와 페이지를 다시 렌더링합니다.
element-ui 인터페이스는 데이터가 있지만 보기는 업데이트되지 않았습니다.
선언: 일반적으로 인터페이스에 데이터가 반환되지만 해당 뷰는 업데이트되지 않고 두 가지 상황만 발생합니다.
1. 이 데이터가 업데이트되기 전에 오류가 있거나 빈틈없는 판단이 있습니다.
2. vue 대상, 수조는 심층 감청할 수 없습니다.
1. 엄격하지 않은 판단과 오류가 있는지 조사한다.
2. vue 대상은 이미 만들어진 실례에 새로운 루트 응답식 속성을 동적으로 추가할 수 없습니다.(vue 홈페이지 참조)
만약 굳이 이렇게 한다면, 우리는this.$를 사용할 수 있다set().
this.$set () 는 세 개의 매개 변수를 수신할 수 있습니다. 1.글자를 묶을 데이터.2. 추가하거나 수정할 속성 이름입니다.3. 부여할 값

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

3. 수동으로 보기 업데이트
이것은 이 실례와 이 실례의slot 슬롯 내용에 영향을 줄 수 있다

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

vue 수정 요소 UI의 페이지 구성 요소 보기에 대한 자세한 설명은 업데이트 문제가 없습니다. 더 많은 vue 요소 페이지 구성 요소 보기 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!