I am attempting to modify this code snippet [A] (refer to fiddle at the 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>
and transform it into [B], which essentially represents the same code but organized within a child component. Here is the parent component:
<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 is the child component:
<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>
The file property has been set on the child component:
props: {
file: {
type: File,
required: true
}
},
There seems to be an issue in the parent-child code since the file __img property does not exist in the child component upon rendering in [B]. See:
https://i.sstatic.net/jVKJw.png
, while it does exist in [A]:
https://i.sstatic.net/ZP82i.png
What could be causing this discrepancy? There are no error messages displayed in the console.
The original code ([A]) can be found here. The File Object includes an xhr instance, as far as I understand.
Here are the code sandboxes for [A] and for [B]. Click ADD and select an image for upload - it will not upload, however [A] would display its thumbnail image, etc.; perform the same action with [B], and those images will not display.
NOTE: I noticed that the file.__img property does not appear initially in [B], but once I start editing the code in the child component..., it suddenly APPEARS. Could this be due to something asynchronous, where it becomes available after a render-refresh...?!