Не работает Vuejs привязка к источнику изображения
У меня есть следующий компонент, где я читаю данные из Indexeddb (ArrayBuffer) и использую его как источник для изображения. Когда родительский компонент использует этот компонент, только последний formUpload получает его набор данных. Мой 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");
}
}
});
Короче говоря, вам нужен ключ.
Когда Vue обновляет список элементов, созданных с помощью
v-for
, он по умолчанию использует стратегию "на месте патча". Если порядок элементов данных изменился, вместо того, чтобы перемещать элементы DOM в соответствии с порядком элементов, Vue просто исправляет каждый элемент на месте и следит за тем, чтобы он отражал то, что должно отображаться в этом конкретном индексе. Это похоже на поведениеtrack-by="$index"
в Vue 1.x.Этот режим по умолчанию эффективен, но подходит только тогда, когда вывод вывода списка не зависит от состояния дочернего компонента или временного состояния DOM (например, входных значений формы).
[...]
Рекомендуется, когда это возможно, предоставлять ключ v-для, если только итерированный контент DOM прост, или вы намеренно полагаетесь на поведение по умолчанию для повышения производительности.
Это довольно распространенная "добыча", которой должно способствовать тот факт, что
В 2.2. 0+ при использовании
v-for
с компонентом теперь требуетсяkey
.