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

在某种程度上,在父子代码中必定存在问题,因为file[B]中的子(在渲染时)中不存在__img属性,请参阅:

,而它确实存在于[A]中:

怎么了？控制台中没有错误.

原始([A])代码来自此处.该文件对象由XHR实例的(我想？).

这里是[A]和[B]的小提琴/沙箱.按ADD并选择要上传的图像,它不会上传,但[A]会显示其缩略图img等; 为[B]做同样的事情,这些都不会显示出来.

NOTA BENE:我注意到file.__img[B]中没有显示,但是当我开始编辑子组件中的代码时......它突然显示出来.显然/也许它是异步的东西,在渲染刷新之后它就在那里......？!

Answer 1

如果您正在寻找一个可行的解决方案,您可以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 2

您必须通过返回工厂函数来使属性值具有反应性。

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