vueコンポーネントにアップロードされた画像で画像を表示するにはどうすればよいですか？このような

Question

マイコード：

<div id="app"> 
    <div v-for="item in items"> 
    <div v-if="!image"> 
     <h2>Select an image</h2> 
     <input type="file" @change="onFileChange"> 
    </div> 
    <div v-else> 
     <img :src="image" /> 
     <button @click="removeImage">Remove image</button> 
    </div> 
    </div> 
</div> 

デモと、このような完全なコード：https://codepen.io/moschel26/pen/jwdMgp

5つの入力ファイルがあります。入力ファイル3に画像をアップロードすると、画像がimg 3にのみ表示されます。入力ファイル5に画像をアップロードすると画像はimg 5にのみ表示されます。

それをしてもいいですか？

Answer 1

アップロードされた画像を設定するには、オブジェクトの配列を作成する必要があります。ここ

<div id="app"> 
    <div v-for="item in items"> 
    <div v-if="!item.image"> 
     <h2>Select an image</h2> 
     <input type="file" @change="onFileChange(item, $event)"> 
    </div> 
    <div v-else> 
     <img :src="item.image" /> 
     <button @click="removeImage(item)">Remove image</button> 
    </div> 
    </div> 
</div> 

全例：https://codepen.io/emils/pen/VWgpaJ