Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Denton Zhou
Denton Zhou
11,775 Points

Why does v-show cause cards to disappear when "flipped," where v-if produces expected result (card flipping)?

When adding the flip transition, only v-if to toggle front/back produces the intended outcome (card flips, front card info disappears and back card info appears or vice versa).

However, when using v-show, the card does not flip, but disappears on click.

Using vue devtools in Chrome, the card still exists in array cards with flipped = true, so this isn't a matter of accidentally hitting the delete card button.

Any idea why this is?

This flips the card properly:

<transition name="flip">
    <p class="card" key="front" v-if="!card.flipped">
        {{card.front}}
        <span v-on:click="cards.splice(index, 1)" class="delete-card">X</span>
    </p>
    <p class="card" key="back" v-else>
        {{card.back}}
        <span v-on:click="cards.splice(index, 1)" class="delete-card">X</span>
    </p>
</transition>

This doesn't:

<transition name="flip">
    <p class="card" key="front" v-show="!card.flipped">
        {{card.front}}
        <span v-on:click="cards.splice(index, 1)" class="delete-card">X</span>
    </p>
    <p class="card" key="back" v-show="card.flipped">
        {{card.back}}
        <span v-on:click="cards.splice(index, 1)" class="delete-card">X</span>
    </p>
</transition>