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 Vue.js Basics Building a Flashcard App Creating a New Card

Frederick Bogdanoff
Frederick Bogdanoff
15,339 Points
Posted by Frederick Bogdanoff
Frederick Bogdanoff
15,339 Points

Having trouble displaying the back of new card.

Hey there. I'm currently having trouble displaying the back of a new card like in the tutorial. Currently the new card gets added. But I cannot display the back. Toggling the flipped property from false to true also doesn't have an effect unlike the original cards.

this is my vue instance

  new Vue({
    el: '#flashcard-app',
    data: {
      cards: cards,
      newFront : '',
      newBack : ''
    },
    methods: {
      toggleCard: function(card){
        card.flipped = !card.flipped;
      },
      addNew: function(){
        this.cards.push({
          front: this.newFront,
          back: this.newFront,
          flipped: false
        });
      }
    }
  });
Frederick Bogdanoff
Frederick Bogdanoff
15,339 Points
Frederick Bogdanoff
Frederick Bogdanoff
15,339 Points

Here is my template `

<div class="flashcard-form">
  <label for="front">Front
    <input v-model="newFront" type="text" id="front">
  </label>
  <label for="back">Back
    <input v-model="newBack" type="text" id="back">
  </label>
  <button v-on:click="addNew">Add a New Card</button>
  <span class="error">Oops! Flashcards need a front and a back.</span>
</div>

<ul class="flashcard-list">
  <li v-on:click="toggleCard(card)" v-for="card in cards">
    <p v-if="!card.flipped" class="card">{{card.front}}
        <span class="delete-card">X</span>
    </p>
    <p v-else class="card">{{card.back}}
        <span class="delete-card">X</span>
    </p>
  </li>
</ul>

3 Answers

Treasure Porth
STAFF
Treasure Porth
Treehouse Teacher
Treasure Porth
Treasure Porth
Treehouse Teacher

Hey Frederick, it looks like in your Vue instance, you're setting both the front and the back of the card to this.newFront. Make sure you're setting the back property to this.newBack:)

Frederick Bogdanoff
Frederick Bogdanoff
15,339 Points
Frederick Bogdanoff
Frederick Bogdanoff
15,339 Points

Haha can't believe I missed this. Thank you

Frederick Bogdanoff
Frederick Bogdanoff
15,339 Points
Frederick Bogdanoff
Frederick Bogdanoff
15,339 Points

alright... Somewhat confusing.. I fiddled around by typing v-on:click="addNew()" and it worked. I even went back and changed it back to v-on:click="addNew" and it's still working like it should... I'm quite new to front end frameworks, is this unusual behaviour?

Jeffrey Ayling
Jeffrey Ayling
12,675 Points
Jeffrey Ayling
Jeffrey Ayling
12,675 Points

Treasure Porth's code didn't work for me either. My issue, I had to adjust from...

this.cards.push({

to...

cards.push({

...took me a while to figure out.