CODEWITHSUNDEEP
vue.jsvuejs3
Pensils
Pensils

Reputation: 21

Vue don't give @click to a single element when using v-for to create them

I'm trying to make every single element created with the v-for the ability to toggle between 'face' class, but it happens that it toggles everything created with the v-for.

<div class="deckPairs">
        <div class="deckBoxOne" v-for="base in cards" :key="base.id" >
            <div class="deckBoxBlanc" :class="{face : face}" @click="face = !face">
                <img class="deckPairsImage" style="z-index: 3" alt="Vue logo"  :src="require('../assets/rightCardSide.png')">
            </div>  
            <div class="deckBoxImg" :class="{face : !face}" @click="face = !face">
                <img class="deckPairsImages" style="z-index: 2" :src="require(`../assets/images/${base.url}`)">
            </div>
        </div>

</div>

Script:

export default {
    setup() {
        const face = ref(false)
        return { face }
    },

    data(){
        return {
            face: false,

        }
    },

    methods: {
    }
}

Upvotes: 2

Views: 53

Answers (1)

Luis de Brito
Luis de Brito

Reputation: 757

Create a component to encapsulate the v-for content.

// new-component.vue
<template>
<div>
    <div class="deckBoxBlanc" :class="{face : face}" @click="face = !face">
        <img class="deckPairsImage" style="z-index: 3" alt="Vue logo"  :src="require('../assets/rightCardSide.png')">
    </div>  
    <div class="deckBoxImg" :class="{face : !face}" @click="face = !face">
        <img class="deckPairsImages" style="z-index: 2" :src="require(`../assets/images/${base.url}`)">
    </div>
</div>
</template>

export default {
  data(){
    return {
        face: false
    }
  }
}

Now update v-for to use the new component.

<div class="deckPairs">
    <div class="deckBoxOne" v-for="base in cards" >
        <new-component :key="base.id"/>
    </div>
</div>

Upvotes: 1

Related Questions