Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Vue.js Basics Building a Flashcard App Creating a New Card

Frederick Bogdanoff
Frederick Bogdanoff
15,338 Points
Posted by Frederick Bogdanoff
Frederick Bogdanoff
15,338 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,338 Points
Frederick Bogdanoff
Frederick Bogdanoff
15,338 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,338 Points
Frederick Bogdanoff
Frederick Bogdanoff
15,338 Points

Haha can't believe I missed this. Thank you

Frederick Bogdanoff
Frederick Bogdanoff
15,338 Points
Frederick Bogdanoff
Frederick Bogdanoff
15,338 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,524 Points
Jeffrey Ayling
Jeffrey Ayling
12,524 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.