'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: {
    }
}
vue.jsvuejs3


Solution 1:[1]

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>

Solution 2:[2]

You can use base.id instead boolean and v-show directive:

const { ref } = Vue
const app = Vue.createApp({
  el: "#demo",
  setup() {
    const face = ref(false)
    const cards = ref([{id: 1, url: "https://picsum.photos/100"}, {id: 2, url: "https://picsum.photos/101"}, {id: 3, url: "https://picsum.photos/102"}])
    const rightCardSide = ref("https://picsum.photos/103")
    const setFace = (val) => {
      face.value = val
    }
    return { cards, face, rightCardSide, setFace }
  },
})
app.mount('#demo')
.deckPairs {
  display: flex;
}
.deckBoxOne {
  cursor: pointer;
}
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="deckPairs">
    <div class="deckBoxOne" v-for="base in cards" :key="base.id" >
      <div class="deckBoxBlanc" v-show=" face !== base.id" @click="setFace(base.id)">
        <img class="deckPairsImage"  alt="Vue logo"  :src="rightCardSide">
      </div>  
      <div class="deckBoxImg" v-show="face === base.id"  @click="setFace(false)">
        <img class="deckPairsImages"  :src="base.url">
      </div>
    </div>
</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Luis de Brito
Solution 2 Nikola Pavicevic

Related Questions