0

Всем привет,ребят,немного глупый вопрос но как такую конструкцию вывести циклом,чтобы постоянно не дублировать код)

 <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 ответ 1

0

Ничего сложного:

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>

Документация.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.