Свойство дочернего компонента Vue не работает

Question

Я пытаюсь взломать этот код [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>

в [B] в основном тот же код, но затем с дочерним компонентом. Здесь родитель:

<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
    }
  },

Каким-то образом в коде parent-child должна быть проблема, так как свойство file __img не существует в потомке (при рендеринге) в [B], см .:

, тогда как он существует в [A]:

Что не так? В консоли нет ошибок.

Оригинальный ([A]) код от здесь . Файловый объект состоит из экземпляра xhr (полагаю?!).

Здесь скрипты / песочницы для [A] и для [B] . Нажмите ADD и выберите изображение для загрузки, оно не будет загружено, но [A] покажет его эскиз img и т. Д .; сделайте то же самое для [B], и они не будут отображаться.

NOTA BENE: я заметил, что file.__img не отображается первым в [B], но когда я начинаю редактировать код в дочернем компоненте ..., он внезапно показывает. Итак, по-видимому / возможно это что-то асинхронное и после рендеринга-обновления оно есть ...?!

Answer 1

Необходимо сделать значение свойства реактивным, вернув заводскую функцию.

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

Answer 2

Если вы ищете рабочее решение, вы можете просто назначить ключ для компонента 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>

CodeSandbox

Answer 3

Если вы обновляете значение свойства объекта в подпорках после монтирования дочернего элемента, он не будет работать, вам придется заменить весь объект, чтобы он работал,

Answer 4

Вроде некрасивый взлом, но я надеюсь, что это решит проблему. Попробуйте установить время ожидания в смонтированной функции, чтобы купить некоторое время до загрузки файла, а затем выполнить условие v-if для загрузки элемента изображения в DOM.

<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] и все работает нормально.