- [Narrator] In this video, we'll start to get a sense
of Vue's reactivity system
and observe how the UI changes
when the underlying data changes.
First, to get rid of that flash of curly braces
when the page loads.
One we can do that is just to not put anything
between the "h1" tags,
to not use the curly braces,
and instead opt to use the "v-text" directive
which is a special attribute that we can use
to bind the inner text to our "deckName" data property.
So now when we refresh, there's no sign of curly braces
because we aren't using them anymore.
Now let's take a step toward displaying some flashcard data
by adding our cards array to our view data.
So, we'll add a new property
in our data object called "cards"
that will initialize with the value "cards"
from the data file.
And, this type of property declaration,
where the name and the value are the same is so common
that we've had a shortcut for it since ES 2015
and in this case it would just be "cards".
So let's see if we can just display the content
of the first card by setting the inner text of this "h2",
I'll remove "item" here,
to "cards",
the first element at index zero,
".front"
And, the inner text of this "div"
to "cards[0].back".
If we refresh, we can see that content
but one problem we have is that you'll notice
that there's a little bit of HTML
in the description here.
Since we're using "v-text" to set the inner text,
that HTML is going to be escaped
and if we want to render it as HTML,
we should use the "v-html" directive instead.
Another problem is that we don't want to show
both the front and the back of the card at the same time.
We'll see some cleaner ways to handle this later
but one way to approach this is to add a new property
called "flipped" which will keep track of
whether this card has been flipped over or not
and it'll be "false" initially.
It's worth mentioning that you can use any single expression
for the value provided to "v-text" or "v-html"
even a ternary expression
like this.
So we're saying that if the value of "flipped" is "true",
we want an empty string here
'cause the card's been flipped over,
otherwise the content of the front like we had it before
and then the opposite for the back.
Sometimes when I start putting ternary expressions
in my templates,
it will feel a little bit messy to me
and that's a signal that I might need
to structure something differently.
But, for now, it's good to know that we can do this
if we need to.
Let's use this as an opportunity
to observe the reactive behavior
that's so important to all modern JavaScript frameworks
which will instantly bring our UI in sync
with the underlying data whenever it changes.
So first we'll save a reference
to our created app in a new variable named "app"
and now, having done that,
we can refresh the browser
and then if we open up the dev tools
in the console,
I can type "app.flipped"
and notice that it shows the default value of "false".
If I set "app.flipped" to "true",
the DOM is updated immediately.
This is the power of a declarative, reactive UI.
Next we'll look at one way to set up a mechanism
to allow the user to flip the card themselves.