vuejs 2组件base64映像未更新 [英] vuejs 2 component base64 image not updating
问题描述
我要实现的目标:
从jwt令牌受保护的源加载图像
服务器将图像返回为base64字符串,然后我将该字符串作为背景url加载到图像上
what i want to achieve:
load an image from jwt token protected source
the server return the image as base64 string and i'll load this string as background url on the image
父组件:
<template lang="html">
<myImage v-for="photo in form.photos" :photo="photo" @delphoto="deleteImage"></myImage>
</template>
export default {
components: {
myImage,
},
data(){
return {
form: {
photos: [
{
id: 1,
thumbnail: "logo1.png"
},
{
id: 2,
thumbnail: "logo2.png"
},
{
id: 3,
thumbnail: "logo3.png"
},
{
id: 4,
thumbnail: "logo4.png"
},
]
},
}
},
methods: {
deleteImage(myphoto)
{
this.form.photos.splice(this.form.photos.indexOf(myphoto), 1);
}
}
}
myImage组件
<template>
<div v-if="loaded" class="img">
<img class="albumimg" :style="{ background: img}" :title="title">
<p @click="delimage">delete</p>
</div>
<div v-else class="img">
<img class="loading" style="background: url('/images/spinner.gif')">
</div>
</template>
<script>
export default {
data(){
return {
img: null,
loaded: false
}
},
props: {
photo: {
required: true
},
title: {
default: ''
},
},
created() {
this.imgurl()
},
methods: {
delimage() {
this.$emit('delphoto', this.photo)
},
imgurl() {
this.$http.get("/api/images/" + this.photo.id).then(response => {
this.img = "url('" + response.data + "')"
this.loaded = true
}, response => {
});
},
}
}
</script>
现在,如果我从form.photos数组中删除照片(拼接),则总是删除最后一张图像. 当我删除绿色图像时
now if i delete a photo (splice) from the form.photos array always the last image get removed. when i remove the green image
蓝色图像消失
当我检查form.photos数组时,删除了正确的图像,只有myImage组件中的img数据属性仍然是前一个数组位置1的旧值.
when i check the form.photos array, the correct image was removed, only the img data attribute from myImage component is still the old value from the previous array position 1.
我能够通过在照相道具上添加手表并重新获取base64字符串来绕过此问题,该字符串对每个图像都会产生新的获取请求
i was able to bypass this issue by adding a watch on the photo prop and refetch the base64 string which cause a new get request for every image
watch: {
photo: function (val) {
this.imgurl()
}
},
有什么方法可以删除数组项(子组件)并显示正确的结果,而无需再次在子组件中获取所有图像?
is there any way to remove an array item (child component) and display the correct result without fetching all images again within the child component?
谢谢
推荐答案
尝试一下.
<myImage v-for="photo in form.photos" :key="photo.id" :photo="photo" @delphoto="deleteImage"></myImage>
根据当前的文档.
在2.2.0+中,将v-for用于组件时,现在需要密钥.
In 2.2.0+, when using v-for with a component, a key is now required.
这篇关于vuejs 2组件base64映像未更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!