Hello everyone, guys, a bit of a stupid question, but how can we infer such a construction in a loop so as not to duplicate the code all the time)

<div class="img-load"> <div class="item1"> <div class="img-container"> <img :src="overAll[0].url" alt="" v-if="overAll[0].url" @click="overallPopUp(0)" /> <img src="../assets/03.expert.inspection.photo.png" alt="" v-else/> <img class="popUp" v-if="overAll[0].showPop" :src="overAll[0].url" v-click-outside="outOverallClick"> <v-btn class="btn-out" v-if="overAll[0].url" icon color="grey" small> <v-icon color="black">clear</v-icon> </v-btn> <label class="loadfile" :class="{hide: overAll[0].url}"> <input class="inputfile" type="file" @change="overallFileSelected(0,'vin')"> </label> </div> </div> <div class="item1"> <div class="img-container"> <img :src="overAll[1].url" alt="" v-if="overAll[1].url" @click="overallPopUp(1)" /> <img src="../assets/03.expert.inspection.photo.png" alt="" v-else/> <img class="popUp" v-if="overAll[1].showPop" :src="overAll[1].url" v-click-outside="outOverallClick"> <v-btn class="btn-out" v-if="overAll[1].url" icon color="grey" small> <v-icon color="black">clear</v-icon> </v-btn> <label class="loadfile" :class="{hide: overAll[1].url}"> <input class="inputfile" type="file" @change="overallFileSelected(1,'rear')"> </label> </div> </div> <div class="item1"> <div class="img-container"> <img :src="overAll[2].url" alt="" v-if="overAll[2].url" @click="overallPopUp(2)" /> <img src="../assets/03.expert.inspection.photo.png" alt="" v-else/> <img class="popUp" v-if="overAll[2].showPop" :src="overAll[2].url" v-click-outside="outOverallClick"> <v-btn class="btn-out" v-if="overAll[2].url" icon color="grey" small> <v-icon color="black">clear</v-icon> </v-btn> <label class="loadfile" :class="{hide: overAll[2].url}"> <input class="inputfile" type="file" @change="overallFileSelected(2,'rightFront')"> </label> </div>

    1 answer 1

    Nothing complicated:

     new Vue({ el: '#app', name: "listProxyTypeItem", data: () => ({ items: [ { url: 'url1', showPop: true }, { url: 'url2', showPop: false }, { url: 'url3', showPop: false }, { url: 'url4', showPop: true }, { url: 'url4', showPop: true } ] }), methods: { outOverallClick () { // ... } } }) 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="app" class="img-load"> <div v-for="(item, index) in items" :key="index" class="item1"> <div class="img-container"> <img :src="item.url" alt="" v-if="item.url" @click="overallPopUp(index)" /> <img src="../assets/03.expert.inspection.photo.png" alt="" v-else/> <img class="popUp" v-if="item.showPop" :src="item.url" v-click-outside="outOverallClick"> <v-btn class="btn-out" v-if="item.url" icon color="grey" small> <v-icon color="black">clear</v-icon> </v-btn> <label class="loadfile" :class="{hide: item.url}"> <input class="inputfile" type="file" @change="overallFileSelected(index,'vin')"> </label> </div> </div> <div> <div>

    Documentation.