Breaking News: Grepper is joining You.com. Read the official announcement!

bind class within a v-for loop

Ahmad Jafari answered on September 18, 2022 Popularity 3/10 Helpfulness 1/10

answer bind class within a v-for loop

bind class within a v-for loop

Comment

  // Vue html
             
  <img
    v-for="(image, index) in images" :key="index" :src="image"
    :class="{'image-full-width': index === activeImage}"
    @click="imageFullWidth(index)"
  />           
              
  // Vue script
            
    data() {
      return {
      	activeImage: false,
    	};
  	},
      
    imageFullWidth(index) {
      if (this.activeImage !== index) {
        this.activeImage = index;
      }
    },
      
     // if you want to have toggling action use following function
            
    imageFullWidthToggling(index) {
      if (this.activeImage === index) {
        	this.activeImage = -1;
      	} else {
        	this.activeImage = index;
      	}
    },

Popularity 3/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: bind class whatever

Link to this answer
Share Copy Link

Contributed on Sep 18 2022

Ahmad Jafari

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

bind class within a v-for loop

Contents

More Related Answers

bind class within a v-for loop

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.