Используйте v-if для определенного элемента в v-for

Итак, у меня есть следующий HTML-код на моей странице Vue

    <div v-for="profile in lab.profiles" v-if="edit || profile.active" class="lab-tests-row-div" @mouseover="">
        <div class="clickBox" :class="['clickBox-' + lab.id + '-' + profile.id]" @click="openInfoPopup"></div>
        <p class="lab-tests-row test-info-row" v-bind:class="{'active': profile.active}">
            <span v-bind:class="{'opacity50':!profile.active}">{{profile.name}}</span> 
            <i v-if="edit" class="fa fa-minus pull-right removeTestIcon" aria-hidden="true" @click="toggleProfile(lab.id, profile.id)"></i>
            <span class="pull-right" v-bind:class="{'opacity50':!profile.active}">{{profile.code}}</span>
        </p>
    </div>

Я хочу показать элемент clickBox, когда пользователь наводит курсор на эту строку, если я использую v-if с логическим значением и изменяю его при наведении указателя мыши, все они будут отображаться, поскольку они находятся в v-for, как я показываю только div в строке, над которой они зависают?


javascript vue.js javascript-framework v-for
person jmona789    schedule 03.01.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В директиве v-for вы можете получить индекс элемента v-for="(profile, index)

Используйте этот индекс, чтобы отображать в шаблоне только тот стиль, который вам нужен.

Например.

new Vue({
  el: '#app',
  data: {
    selected : 0
  }
})
.selectedClass {
  background: lightblue
}

.hoverClass:hover {
  background: lightcoral
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<main id="app">
  <div v-for="(elem, index) in 4">
    <p class="hoverClass" :class="{'selectedClass': selected === index}" @click="selected = index" >{{elem}}</p>
  </div>
</main>
https://stackoverflow.com/posts/54025706/edit#

Отредактировано

Прекрасно сочетается class="..." с привязкой Vue :class="..."

Отредактировано 2

Для вложенного v-for объявите другое имя для индекса.

new Vue({
  el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<main id="app">
    <div v-for="(item, i) in 2">
       <div v-for="(elem, j) in 3">
        v-for item {{ i }} v-for elem {{ j }}
       </div>
    </div>
</main>

person Yoarthur    schedule 03.01.2019
comment
Проблема с этим решением заключается в том, что v-for вложен в другой v-for, поэтому все остальные элементы с тем же индексом в других v-for также будут отображаться. - person jmona789; 03.01.2019
comment
Пример здесь: выбранный codeandbox.io/s/vjn655zyx7 равен 0, но первый элемент отображается в обоих подсписки вместо одного, как я хочу - person jmona789; 03.01.2019