Vue 하위 구성 요소 속성이 작동하지 않음

Vue 하위 구성 요소 속성이 작동하지 않음

이 코드 [A]를 해제하려고 합니다(아래에 있는 바이올린 참조).

  <div class="q-uploader-files scroll">
      <q-item
        v-for="file in files"
        :key="file.name"
      >
        <q-progress :percentage="file.__progress"/>
        <div>
          {{ file.__progress }}%
        </div>

        <q-item-side v-if="file.__img" :image="file.__img.src">
        </q-item-side>
        <q-item-side right>
          <q-item-tile
            :icon="file.__doneUploading ? 'mdi-done' : 'mdi-clear'"
            :color="file.__doneUploading ? 'primary' : 'color'"
            @click.native="__remove(file)"></q-item-tile>
        </q-item-side>
      </q-item>
    </div>

기본적으로 동일한 코드이지만 하위 구성요소로 변환됩니다.다음은 부모입니다.

<div class="q-uploader-files scroll">
  <my-uploader-progress
    v-for="file in files"
    :file="file"
    :key="file.name"
    :color='color'
  >
  </my-uploader-progress>
</div>

그리고 여기 아이가 있다:

<template>
  <q-item>
    <q-progress
      :color="file.__failed ? 'negative' : 'grey'"
      :percentage="file.__progress"
    />
    <div>
      {{ file.__progress }}%
    </div>

    <q-item-side v-if="file.__img" :image="file.__img.src"/>
    <q-item-side v-else icon="mdi-file" :color="color"/>
    <q-item-main :label="file.name" :sublabel="file.__size"/>

    <q-item-side right>
      <q-item-tile
        :icon="file.__doneUploading ? 'mdi-done' : 'mdi-clear'"
        :color="file.__doneUploading ? 'primary' : 'color'"
        @click.native="__remove(file)"
      />
    </q-item-side>
  </q-item>
</template>

아이에 대해서 내가 세팅했다.file속성:

  props: {
    file: {
      type: File,
      required: true
    }
  },

부모-자녀 코드에 문제가 있음에 틀림없다.file[B]의 하위(렌더 시)에 __img 속성이 없습니다. 다음을 참조하십시오.

단, [A]에 존재합니다.

뭐가 잘못됐나요?콘솔에 에러는 없다.

원본([A]) 코드는 여기서부터입니다.File Object는 xhr 인스턴스(예:?!)로 구성됩니다.

[A]와 [B]의 만지작거림/샌드박스입니다.ADD를 누르고 업로드할 이미지를 선택하면 업로드되지 않지만 [A]에는 썸네일 img 등이 표시됩니다.[B]에 대해서도 같은 작업을 하면 이러한 이미지가 표시되지 않습니다.

NOTA BENE: 저는 그 일이file.__img[B]에는 처음에 표시되지 않지만 자 컴포넌트의 코드 편집을 시작하면 갑자기 표시됩니다.그래서 명백하게/ 아마도 그것은 비동기적인 것이고 렌더링-새로고침 후에 그것은...?!

공장 함수를 반환하여 속성 값을 무효로 만들어야 합니다.

props: {
  file: {
    type: File,
    required: true,
    default: function () {
        return {
          name: '',
          _progress: 0
        }
      }
  }
},

유효한 솔루션을 찾고 있는 경우는, 간단하게 키를 할당할 수 있습니다.my-uploader-progress존재에 기초한 성분__img속성을 사용할 수 있게 되면 강제로 재지정됩니다.

<my-uploader-progress
        v-for="file in files"
        :file="file"
        :key="file.__img ? '1-' + file.name : '0-' + file.name"
        :hide-upload-progress="hideUploadProgress"
        :color='color'
>
</my-uploader-progress>

코드 샌드박스

좀 추악한 해킹이지만 이걸로 문제가 해결됐으면 좋겠어요.마운트된 함수에 타임아웃을 설정하여 파일이 로드될 때까지 시간을 벌고 나서v-ifDOM에 이미지 요소를 로드하는 조건입니다.

<template>
  <q-item-side v-if="file_loaded" :image="file.__img.src"/>
</template>

<script>
data () {
  file_loaded: false
},
mounted() {
  setTimeout(() => {
    this.file_loaded = true
  }, 1000)
}
</script>

당신의 샌드박스 [B]에서 시험해 보았습니다만, 정상적으로 동작하고 있습니다.

아이가 마운트된 후 소품에서 개체의 속성 값을 업데이트하면 해당 개체가 작동하지 않을 경우 개체 전체를 교체해야 작동합니다.

언급URL : https://stackoverflow.com/questions/53125604/vue-child-component-property-does-not-work