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

Error: Discord.js was unable to access the 'id' property because it was undefined

What precautions should I take when setting up my login routes to ensure security?

Choosing an option from a PHP MySQL table based on a JavaScript value

Encountered an issue with launching Chrome in Puppeteer for Node.js

Bug detected in the brfs plugin for browserify

Tips on handling jsonp responses in CakePHP without using the .json extension

Trigger a Nuxt/Vuejs event upon completion of rendering all page components

Are there any alternative methods for clearing form fields following a successful thunk dispatch in React?

Having difficulties redirecting with the button's onclick function

Steps for Adding a class or Id to an Ext.Msg.alert box

How can you retrieve the X.509 Certificate from a P12 file using Node JS?

Synchronizing code paths that involve both ajax and non-ajax functions can be achieved by

Using Socket.IO in Node.js to distribute information to every connected client

Discover innovative ways to define reactive attributes within Vue.js

The functionality of Skrollr on mobile is currently not working properly due to the inability to prevent default actions

What is the process for utilizing Sass in Vue CLI rather than node-sass (which is the default for sass-loader)?

Error with setting innerHTML property of a null nested div

How to extract a value from a span input textbox using Vue?

Guide to utilizing an if statement to return a string as the title in a Tooltip pro

Customizing the font color and size of the MUI DatePicker default textfield is not supported