vue $refs 오류 보고 문제를 해결하는 방법

Vue $refs 오류 보고 해결 방법: 1. 해당 코드 파일을 연 다음 "this.$nextTick();"을 추가합니다. 2. Mounted() 후크 함수에서 호출하면 됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.5.17, DELL G3 컴퓨터.

【관련 추천 글: vue.js】

프로젝트 개발 중에 undefound의 'style' 속성을 읽을 수 없는 문제에 직면했습니다. 어떻게 해결했는지는 자세히 설명하지 않고 코드만 게시합니다.

created() {
  this.getAddBG();
},
methods: {
  getAddBG() {
    let config = {
      service: "200017",
      h5Type: "activity"
    };
    this.$http.featchH5Post(config).then(res => {
      let list = res.data.data.advertiseList;
      list.forEach(item => {
        this.$refs[
          item.name
        ].style.backgroundImage = `url(${item.defaultPicture})`;
      });
    });
  }
}

해결책:

첫 번째 방법: this.$nextTick();

created() {
  this.$nextTick(() => {
    this.getAddBG();
  });
}

두 번째 방법: Mounted() 후크 함수를 호출합니다.

mounted() {
  this.getAddBG();
}

이유 조사 및 분석:

1. Vue 라이프 사이클과 Vue.nextTick()부터 시작하겠습니다.

created() 후크 함수가 실행될 때 DOM이 렌더링되지 않으며, 이때는 DOM 작업을 수행할 수 없습니다.

Vue 라이프사이클의 Created() 후크 함수에서 수행되는 DOM 작업은 Vue.nextTick()의 콜백 함수에 배치되어야 합니다.

mounted() Hook 함수가 실행되면 모든 DOM 마운팅과 렌더링이 완료됩니다. 이때 Hook 함수에서 DOM 작업을 수행하는 데에는 문제가 없습니다.

2. Vue 공식 문서에 대한 설명입니다.

Vue는 DOM 업데이트를 비동기식으로 수행합니다. 데이터 변경 사항이 관찰되는 한 Vue는 대기열을 열고 동일한 이벤트 루프에서 발생하는 모든 데이터 변경 사항을 버퍼링합니다. 동일한 감시자가 여러 번 트리거되면 대기열에 한 번만 푸시됩니다. 버퍼링 중 데이터 중복 제거는 불필요한 계산과 DOM 작업을 방지하는 데 매우 중요합니다. 그런 다음 다음 이벤트 루프 틱에서 Vue는 대기열을 플러시하고 실제(중복 제거된) 작업을 수행합니다. Vue는 내부적으로 비동기 대기열에 기본 Promise.then 및 MessageChannel을 사용하려고 시도합니다. 실행 환경이 이를 지원하지 않으면 대신 setTimeout(fn, 0)이 사용됩니다.

Vue.nextTick()은 코드 실행을 지연하는 데 사용됩니다.

위 내용은 vue $refs 오류 보고 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!