vuejs 2 组件 base64 图像不更新

Question

我想达到的目标：
从 jwt 令牌保护源加载图像
服务器 return 图像作为 base64 字符串，我将把这个字符串作为背景 url 加载到图像

父组件：

<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);
            }
        }
    }

我的图片组件

<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 数组中删除照片（拼接），最后一张图像总是会被删除。当我删除绿色图像时

蓝色图像消失

当我检查 form.photos 数组时，正确的图像被删除了，只有 myImage 组件的 img 数据属性仍然是前一个数组位置 1 的旧值。

我能够通过在照片道具上添加一个手表并重新获取 base64 字符串来绕过这个问题，这会导致对每个图像都有一个新的获取请求

watch: {
   photo: function (val) {
      this.imgurl()
   }
},

有什么方法可以删除数组项（子组件）并显示正确的结果，而无需在子组件中再次获取所有图像？

谢谢

Answer 1

试试这个。

<myImage v-for="photo in form.photos" :key="photo.id" :photo="photo" @delphoto="deleteImage"></myImage>

从当前documentation.

In 2.2.0+, when using v-for with a component, a key is now required.

vuejs 2 组件 base64 图像不更新

vuejs 2 component base64 image not updating

javascript

laravel

vue.js

vue-component

vuejs2