Incorporate v-if to target a particular item within a v-for loop

Question

Incorporate v-if to target a particular item within a v-for loop

On my Vue page, I have the following HTML code snippet:

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

I am facing an issue where I want to display the 'clickBox' element only when the user hovers over a specific row. However, if I use a v-if with a boolean and change it on mouseover, all rows show the clickBox since they are part of a v-for loop. How can I ensure that only the div in the particular row being hovered over is shown?

javascript vue.js javascript-framework v-for

Answer 1

Answer №1

When using the v-for directive, you have access to the index of each element with v-for="(profile, index)

You can utilize this index to apply specific styles in your template.

For instance:

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#

Update

Combining class="..." with Vue binding :class="..." is a valid approach.

Additional Edit

If dealing with nested v-for, consider assigning distinct names to the indexes.

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>

Answer 2

When using the v-for directive, you have access to the index of each element with v-for="(profile, index)

You can utilize this index to apply specific styles in your template.

For instance:

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#

Update

Combining class="..." with Vue binding :class="..." is a valid approach.

Additional Edit

If dealing with nested v-for, consider assigning distinct names to the indexes.

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>

Incorporate v-if to target a particular item within a v-for loop

Answer №1

Similar questions

What is the process for embedding a NextJS app within a different website?

Check if a user is currently on the identical URL using PHP and JavaScript

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

Display localization keys in Vue using i18n

Is there a way to verify if the object's ID within an array matches?

Incorporating the non-typescript npm package "pondjs" into Meteor applications using typescript files

Leveraging the power of JavaScript to reveal concealed div elements

Keep moving the box back and forth by pressing the left and right buttons continuously

Developing distinct state values for assigned objects

Issues with setSelectionRange functionality in JavaScript unit tests leading to unexpected behavior

What is the best way to include a new array at the beginning of a lexicographically sorted array?

The switch switches on yet another switch

The map failed to display any information

The submission of the form using AJAX is currently experiencing issues

Creating complex concave shapes using Three.js from a point cloud

The Ajax Form disappears from the page

What is causing the error to occur during the installation of the NestJS Client?

Foreign keys in a one-to-many relationship with Sequelize.js

JavaScript problem indicating an error that is not a function

Change a reactive variable based on an event