약속 콜백에서 vue 데이터 변경

약속 콜백에서 vue 데이터 변경

약속 콜백 내부에서 Vue 데이터를 변경하려고 하는데 어떤 이유로 템플릿의 값 변경을 볼 수 없습니다.

약속 콜백에서 Vue의 속성을 업데이트하는 방법을 확인했습니다.그리고 나는 그것을 바꿨다.this템플릿에서 값이 변경되는 것을 볼 수 없습니다.

템플릿은 다음과 같습니다.

<template>
  {{ sites }}
</template>

제 대본은 이렇습니다.

data: () => ({
  sites: {}
}),
methods: {
  initialize(snapshot) {
    let _this = this
    snapshot.forEach((site) => {
      convert(site.data())
        .then(converted => {
          _this.sites[site.id] = converted
        })
    })
  }
}

왜 데이터가 변경되지 않는지 아십니까?

반작용적인 문제인 것 같아요시도해 보세요

.then(converted => {
  const sites = JSON.parse(JSON.stringify(_this.sites))
  sites[site.id] = converted
  _this.sites = sites
}

상세설명:

페이지를 갱신하기 위해 Vue는 저렴한 비교(제가 알기로는 참조 비교)를 하고 있습니다.오브젝트 속성만 갱신해도 같은 참조를 가리키고 있습니다.-> Vue는 페이지를 갱신하지 않습니다.그래서 우리는 그것들을 깊이 복사해서 비교가 잘 되도록 해야 한다.

언급URL : https://stackoverflow.com/questions/50603051/change-vue-data-from-promise-callback