Не работает Vuejs привязка к источнику изображения

108
9

У меня есть следующий компонент, где я читаю данные из 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");
}
}
});

спросил(а) 2017-04-24T00:51:00+03:00 3 года, 7 месяцев назад
1
Решение
83

Короче говоря, вам нужен ключ.

Когда Vue обновляет список элементов, созданных с помощью v-for, он по умолчанию использует стратегию "на месте патча". Если порядок элементов данных изменился, вместо того, чтобы перемещать элементы DOM в соответствии с порядком элементов, Vue просто исправляет каждый элемент на месте и следит за тем, чтобы он отражал то, что должно отображаться в этом конкретном индексе. Это похоже на поведение track-by="$index" в Vue 1.x.

Этот режим по умолчанию эффективен, но подходит только тогда, когда вывод вывода списка не зависит от состояния дочернего компонента или временного состояния DOM (например, входных значений формы).
[...]
Рекомендуется, когда это возможно, предоставлять ключ v-для, если только итерированный контент DOM прост, или вы намеренно полагаетесь на поведение по умолчанию для повышения производительности.

Это довольно распространенная "добыча", которой должно способствовать тот факт, что

В 2.2. 0+ при использовании v-for с компонентом теперь требуется key.

ответил(а) 2017-04-24T15:18:00+03:00 3 года, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема