uniapp 온로드 데이터를 렌더링할 수 없으면 어떻게 해야 합니까?

최근에 uniapp을 사용하여 작은 프로그램 프로젝트를 개발하는데 문제가 발생했습니다. 즉, 페이지의 데이터를 렌더링할 수 없다는 것입니다. 몇 가지 탐구와 고민 끝에 마침내 해결책을 찾았습니다.

Problem

페이지의 onLoad 라이프사이클 함수에서 데이터를 가져오기 위한 요청을 시작하고 데이터의 속성에 데이터를 할당하고 렌더링을 위해 템플릿의 속성을 사용했습니다. 그러나 문제가 발생하여 해당 데이터를 템플릿에서 렌더링할 수 없습니다.

먼저, 변수 이름 철자 오류, 데이터 유형 불일치 등 몇 가지 일반적인 오류를 제거했습니다. 그러나 이것들은 문제를 해결하지 못했습니다.

Solution

데이터를 얻기 전에 렌더링될 수 있으므로 onLoad 수명 주기 함수에서 직접 렌더링하는 것이 불가능하다는 것을 깨달았습니다. 이 문제에 대응하여 다음과 같은 몇 가지 해결 방법을 시도했습니다.

1. 구성 요소의 생성된 라이프 사이클 함수에 데이터 요청을 배치합니다.

생성된 라이프 사이클 함수에서는 데이터 요청이 비동기적으로 수행되는 반면 렌더링 구성 요소는 동기적으로 수행되어 데이터를 얻기 전에 렌더링되기 때문에 이 방법은 기본적으로 실현 가능하지 않습니다.

2. 시계를 사용하여 데이터 변경 사항을 모니터링하세요.

이 방법은 실제 작업에서 가능합니다. 데이터 변경은 watch를 통해 모니터링됩니다. 데이터가 성공적으로 획득되면 watch 기능이 트리거되고 렌더링됩니다.

코드 표시:

export default {
  data() {
    return {
      dataList: []
    }
  },
  watch: {
    dataList: function(val) {
      if (val.length > 0) {
        this.$nextTick(() => {
          //渲染组件的操作
        })
      }
    }
  },
  onLoad() {
    // 发起数据请求,并在成功后赋值给dataList
  }
}

여기서는 데이터를 성공적으로 얻은 후 Vue.nextTick 메서드를 사용하여 구성 요소를 렌더링해야 한다는 점에 유의해야 합니다. 그렇지 않으면 구성 요소가 완전히 렌더링되지 않을 수 있습니다.

결론

uniapp에서는 onLoad 라이프 사이클 함수에서 데이터를 직접 렌더링하는 것은 불가능합니다. 데이터 변경 사항을 모니터링하고 데이터를 성공적으로 얻은 후 구성 요소를 렌더링하려면 watch를 사용해야 합니다.

위 내용은 uniapp 온로드 데이터를 렌더링할 수 없으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!