vuejs私が達成したいものを

Question

を更新していない2コンポーネントbase64で画像を：JWTトークン保護ソース
から画像サーバは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); 
      } 
     } 
    } 

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配列から写真（スプライス）を削除すると、常に最後のイメージが削除されます。私は緑色の画像を削除すると

青色画像iがform.photos配列を確認したときに、正しい画像が除去された

を消失は、MYIMAGEコンポーネントからのみIMGのデータ属性が依然として古いです前回の配列位置から値1

私は写真の小道具に時計を追加することで、この問題を回避し、すべての画像

のための新しいGETリクエストを引き起こすbase64文字列を再フェッチすることができました

アレイコンポーネント（子コンポーネント）を削除し、子コンポーネント内のすべてのイメージを再度フェッチせずに正しい結果を表示する方法はありますか？

ありがとうございました

Answer 1

これを試してください。

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

現在からdocumentation。

2.2.0以降では、コンポーネントでv-forを使用する場合、キーが必要になりました。