I am having an issue with a component that reads data from IndexedDB (ArrayBuffer) and uses it as the source for an image. The problem is that when the parent component utilizes this component, only the last formUpload has its dataSource set. Even though my console.log statements show that the data is present and the URL.createObjectURL is successfully created, the images are not being assigned as the source of the image. Any suggestions?
<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");
}
}
});