Question

我有以下组件，我从Indexeddb（ArrayBuffer）读取数据并将其用作图像的源。当父组件使用此组件时，只有最后一个formUpload获取它的dataSource集。我的console.log告诉我数据存在，URL.createobjecturl已成功创建，我可以在devtools中打开它们并查看图像，但它们不会被指定为图像的源。有什么想法吗？

<div class="ui grid segment" v-if="formData.Uploads.length > 0">
    <div class="four wide column" v-for="upload in formData.Uploads" style="position:relative;">
        <formUpload :upload="upload"></formUpload>
    </div>
</div>

Vue.component("formUpload", {
    props: ["upload"],
    template: `
        <div class="ui fluid image">
            <a class="ui green left corner label">
                <i class="add icon"></i>
            </a>
            <a class="ui red right corner label" v-on:click="removeUpload(upload)">
                <i class="remove icon"></i>
            </a>
            <img style="width:100%;" :src="dataSource" />
            <div class="ui blue labels" v-if="upload.tags.length > 0" style="margin-top:5px;">
                <image-tag v-for="tag in upload.tags" :tagtext="tag" :key="tag" :upload="upload.id" v-on:deletetag="deletetag"></image-tag>
            </div>
        </div>
    `,
    data: function () {
        return {
            dataSource: undefined
        }
    },
    mounted: function () {
        _this = this;

        imageStore.getItem(_this.upload.imageId).then(function (result) {

            console.log("Data gotten", result.data);

            var dataView = new DataView(result.data);
            var blob = new Blob([dataView], { type: result.type });

            console.log("Data transformed", blob);

            _this.dataSource = URL.createObjectURL(blob);

            console.log("DataUrl", _this.dataSource);

        });

    },
    methods: {
        removeUpload: function (upload) {
            console.log("removeUpload");
        }
    }
});

Answer 1

简而言之，you need a key。

当Vue更新使用v-for呈现的元素列表时，它依次为   默认使用“就地补丁”策略。如果是数据的顺序   项已更改，而不是移动DOM元素以匹配   物品的顺序，Vue将简单地修补每个元素和   确保它反映了应该在该特定情况下呈现的内容   指数。这类似于Vue中track-by="$index"的行为   1.x的。

此默认模式是高效的，但只有当列表呈现输出不依赖于子组件状态或临时DOM时才适合   状态（例如表格输入值）。
  [...]
  建议尽可能提供带有v-for的密钥，除非迭代的DOM内容很简单，或者您故意依赖默认行为来提高性能。

这是一个相当普遍的“问题”，应该有助于

这一事实

在2.2.0+中，当v-for与组件一起使用时，现在需要key。

Vuejs在图像源上的数据绑定不起作用

1 个答案: