Vue child component property does not work

Question

I am trying to break this code [A] (see fiddle at bottom):

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

into [B] the basically the same code but then with a child component. Here the parent:

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

And here the child:

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

On the child I have set the file property:

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

Somehow in the parent-child code there must be a problem as the file __img property does not exist in the child (at render) in [B] see:

, whereas it does exist in [A]:

What's wrong? There are no errors in the console.

The original ([A]) code is from here. The File Object consists of a xhr instance (I suppose?!).

Here fiddles/ sandboxes for [A] and for [B]. Press ADD and select an image to upload, it will not upload but [A] will show its thumbnail img etc; do the same for [B] and these will not show.

NOTA BENE: I noticed that the file.__img does not show first in [B], but when I start editing code in the child component..., it suddenly SHOWS. So apparently/ maybe it is something asynchronous and after a render-refresh it is there...?!

Answer 1

You have to make the property value reactive by returning a factory function.

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