Вывести циклом vue.js

170

30 ноября 2018, 02:50

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

 <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>

Answer 1

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

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>

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

jar Файл не подключается к MySQL

Написал программку на java, в коде прописал кнопку button, при нажатии на неё происходит подключение к БД MySQL но только из IDEA, а вот из jar файла подключение...

204

MySQL

Как в OpenCobol подключить mysql?

Может кто-нибудь сталкивался с Cobol и сможет подсказать как подключить mysql к OpenCobolЗнаю что EXEC openCobol не поддерживает а как по-другому подключить...

155

MySQL

Создать запрос через Laravel QueryBuilder

Подскажите, как можно составить такой запрос, используя QueryBuilder в Laravel?

239

MySQL

Как выбрать диалог пользователя со мной при такой структуре базы? Если никак то помогите собрать структуру

Таблица для хранения общей информации по диалогу

179