CODEWITHSUNDEEP
htmlcssvue.js
Adoga Patricia
Adoga Patricia

Reputation: 129

Make individual image enlarge on click with vue

I am trying to make like an image modal, I am using html, css and vue and I am new to this, when I click on an image all of them enlarge, what can i do to only make one of the them enlarge since I am looping through an array for the images.

<div v-if="visible" class="food__menu">
          <a href="#" class="food__list" v-for="food in foods" :key="food">
            <div class="food__image">
              <img
                :src="food.image"
                :class="{fullWidthImage : fullWidthImage }"
                @click="fullWidthImage = !fullWidthImage"
              />
            </div>
            <div class="food__details">
              <span class="food__name">{{food.name}}</span>
              <span class="food__type">{{food.type}}</span>
            </div>
          </a>
        </div>

.fullWidthImage {
  width: 300px !important;
  height: 400px !important;
  display: flex;
  position: absolute;
}

.food__image img {
  height: 60px;
  width: 60px;
}

export default {
  data() {
    return {
      toggle: false,
      visible: false,
      mealTitle: false,
      fullWidthImage: false,
      foods: [
        {
          image: require("../assets/images/food.png"),
          name: "potatoes",
          type: "Carbohydrate"
        },
        {
          image: require("../assets/images/food1.png"),
          name: " rice",
          type: "Protein"
        },
        {
          image: require("../assets/images/food2.png"),
          name: "Lamb",
          type: "Carbohydrate"
        },
}
}
}

I am trying to do this enter image description here

but when I click on one all enlarge, please help enter image description here

Upvotes: 1

Views: 2875

Answers (1)

Terry
Terry

Reputation: 66133

That is because you are storing the fullWidthImage on a component data level, which is not scoped to individual images. Therefore, when it flips to true, all images will be enlarged.

You can instead store the index of the image you want to be full width. This will allow you to conditionally toggle the class based on the index of the image.

<a href="#" class="food__list" v-for="(food, i) in foods" :key="food">
    <div class="food__image">
        <img
            :src="food.image"
            :class="getImageClass(i)"
            @click="onImageClick(i)"
        />
    </div>
</a>

Then, in the component, create the following methods:

data: {
    fullWidthImageIndex: null,
    // ... other data here
},
methods: {
    getImageClass: function(i) {
        return {
            'fullWidthImage': this.fullWidthImageIndex === i
        };
    },
    onImageClick: function(i) {
        if (this.fullWidthImageIndex === i) {
            this.fullWidthImageIndex = null;
        } else {
            this.fullWidthImageIndex = i;
        }
    }
}

Upvotes: 2

Related Questions