vue.for - v-for에서 동적으로 생성된 구성 요소가 바인딩된 속성을 올바르게 업데이트하지 않음

vue.for - v-for에서 동적으로 생성된 구성 요소가 바인딩된 속성을 올바르게 업데이트하지 않음

vue.js에서 문제가 발생했는데 어떻게 해결해야 할지 모르겠어요.나는 그것의 요점을 가능한 한 명확하고 간결하게 설명하려고 노력할 것이다.

상황.

rest API에서 데이터를 로드합니다.javascript 프로토타입 구문을 사용하여 클래스를 만들었습니다.DataLoader모든 로드 및 내부 상태 변경을 처리합니다.로드된 데이터는 대개 반복적인 방식으로 표시됩니다(예: 목록 또는 카드).새로운 컴포넌트를 만들었습니다.DataLoaderWrapper이 목적을 위해,DataLoader오브젝트를 속성으로 합니다.그DataLoaderWrapper로딩 상태에 따라 로딩 스피너를 표시합니다.DataLoader물건.또한 컴포넌트 마크업에는 다음 태그가 포함됩니다.

<slot :dataLoader='dataLoader' />

로드된 데이터에 쉽게 액세스할 수 있도록 합니다.컴포넌트를 다음과 같이 사용하는 것이 목적입니다.

<DataLoaderWrapper :dataLoader="myDataLoader">
  <template slot-scope="props">
    <template v-for="item in props.dataLoader.data">
       {{item}}
    </template>
  </template>
</DataLoaderWrapper>

이 문제를 바로 해결하기 위해서입니다.왜 제가props.dataLoader대신myDataLoader사용할 수 있습니까?기본적인 생각으로는DataLoader오브젝트는 때때로 동적으로 생성되므로 오브젝트인스턴스에 대한 가장 직접적인 액세스는 컴포넌트 바인딩 속성을 통해 이루어집니다.(로더에 대한 직접 접근을 시도했지만 다른 동작을 찾을 수 없었습니다만, 이 방법으로 컴포넌트를 사용하기 쉬워집니다.)

---

이제 이 기본 개념을 확장해 보겠습니다.

예를 들어,DataLoader음악 릴리즈 목록을 로드하도록 설정된 오브젝트.이것은 다음과 같습니다.

<DataLoaderWrapper :dataLoader="myReleaseLoader">
...
</DataLoaderWrapper>

또한 모든 발매는 한 명 이상의 아티스트에 의해 출판됩니다.아티스트 목록은 별도로 로드해야 합니다.예를 다음과 같이 확장할 수 있습니다.

<DataLoaderWrapper :dataLoader="myReleaseLoader">
  <template slot-scope="props">
    <template v-for="release in props.dataLoader.data">
      <h1>release.Title</h1>
      Artists: 
      <DataLoaderWrapper :dataLoader="getArtistsLoader(release)">
        <template slot-scope="nestedProps">
          {{nestedProps.dataLoader.data.map(artist => artist.Name).join(', ')}}
        </template>
      </DataLoaderWrapper>
    </template>
  </template>
</DataLoaderWrapper>

---

문제

릴리스가 올바르게 로드되고 템플릿이myReleaseLoader올바르게 렌더링됩니다.이런 일이 일어나자마자, 새로운 것이DataLoader인스턴스가 동적으로 생성되어 특정 릴리스의 아티스트를 로드하도록 순서가 지정됩니다.이것은 모든 릴리스에 대해 발생합니다.아티스트 로더가 로드되는 동안 로드 스피너가 표시됩니다.문제는 이 모든 것이nestedProps변수가 즉시 업데이트되지 않습니다.DataLoaderinstance는 데이터 로드가 완료되었습니다.

저는 이 문제를 해결하려고 적어도 이틀 동안 노력했습니다. 즉, 생각나는 모든 것을 디버깅하고 확인했습니다.

데이터가 올바르게 로드되어 존재하고 있다고 확신합니다.의 로딩 DataLoaderWrapper되어 인쇄가 되지 않았습니다.nestedProps.dataLoaderdata: []컴포넌트 검사 시 표시된 상태와 일치하지 않습니다.부터 말하면,이 말은 ' 하다'입니다.nestedProps속성이 올바르게 업데이트되지 않았습니다.

이는 vue 바인딩이 단방향이며 하위 구성 요소의 업데이트가 상위 구성 요소의 업데이트를 트리거하지 않기 때문일 수 있습니다.

"핫 새로고침"이 켜진 상태에서 로컬 컴퓨터에 페이지를 로드하면 페이지의 전체 새로고침을 수행하지 않고 파일에 변경 내용을 저장할 때마다 UI로 업데이트가 수행됩니다.현재 UI를 업데이트할 때 처음 페이지를 로드할 때와 로더의 상태가 다릅니다.가 다시. 가 로드되지 않기 때문입니다.getArtistsLoader(..)함수는 요청 시 항상 동일한 로더가 특정 릴리스에 대해 반환됨을 보장하는 캐시를 구현합니다. 즉, 페이지가 다시 표시될 때 데이터가 기본적으로 이미 존재하므로 원하는 출력이 표시됩니다.그렇지 않으면 올바른 상태에 들어갈 수 없었습니다.

된 속성, 및 에 대한 보다 직접적인 계된 、 더 i 、 더 i ( to to to i ( to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to to)로 작업하려고 했습니다.props.dataprops.dataLoader.data어느 것도 업데이트 문제를 해결하지 못했습니다.

이거 어떻게 해?

문제는 getArtistsLoader가 데이터를 동기화하여 반환하지 않는다는 것입니다.

const data = getArtistsLoader(release);
// data === undefined

그래서 그 안에서DataLoaderWrapper Loader 데이터 로더에 대해

솔루션

Loader 는 Data Loader Wrapper를 할 수 .promise데이터로서 사용할 수 있기 때문에, 약속이 해결되었을 때에 갱신할 수 있습니다.

1. 약속을 받아들이도록 Data Loader Wrapper를 업데이트합니다.

용 an an an를 .async 또는 notdata Loader입니다.

<template>
  <div>
    <slot :dataLoader="realData"/>
  </div>
</template>

<script>
export default {
  props: {
    dataLoader: null,
    async: Boolean
  },
  data() {
    let realData = this.dataLoader;
    if (this.async) {
      realData = [];
      this.dataLoader
        .then(data => {
          this.realData = data;
        })
        .catch(error => {
          console.log(error);
        });
    }
    return {
      realData: realData
    };
  }
};
</script>

2. get Artists Loader 반품 약속하기

function getArtistsLoader(release) {
  retrun axios.get('/artists?release=' + release.id)
    .then((response) => response.data)
}

3을 . 추가async

<DataLoaderWrapper async :dataLoader="getArtistsLoader(release)">

풀 데모

언급URL : https://stackoverflow.com/questions/48975126/vue-js-dynamically-generated-component-in-v-for-does-not-update-bound-property