8

我正在尝试破解此代码 [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]的小提琴/沙箱。按添加并选择要上传的图像，它不会上传，但[A]会显示其缩略图img等；对 [B] 执行相同操作，这些将不会显示。

NOTA BENE：我注意到file.__img[B] 中没有首先显示，但是当我开始在子组件中编辑代码时...，它突然显示。所以显然/也许它是异步的，在渲染刷新之后它就在那里......？！

4

4 回答 4

5

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

代码沙盒

于 2018-11-06T16:41:37.287 回答
5

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

props: {
  file: {
    type: File,
    required: true,
    default: function () {
        return {
          name: '',
          _progress: 0
        }
      }
  }
},
于 2018-11-08T20:13:02.413 回答
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]中尝试过这个，它工作正常。

在此处输入图像描述

于 2018-11-05T10:08:21.170 回答
4

如果您在挂载子对象后更新 props 中对象的属性值，它将无法工作，您必须替换完整的对象才能使其工作，

于 2018-11-08T19:16:23.970 回答