All language subtitles for 2. Understanding the Problem

So here's a little starting project

with which I want to start.

And what exactly is the problem here?

What can we do with Vue to make this project better?

Well, for one, my goal, no pun intended is that

we can add goals here, like finish the course.

And when we then press add goal, currently nothing happens.

That goal should be added as a goal in a growing list.

If we have a look at the index HTML file

of the starting project,

which by the way is attached to this lecture, of course,

then you see in there, I got an unordered list

with one dummy list item at the moment.

And my goal is that the items we're entering here should be

added to this list.

And we also should be able to then click

on those list items to remove them from the list.

But that's just one thing which I want to implement

with you in this module.

And you will learn how that can be done with Vue.

But for a start, I actually want to focus on something else.

I have this message here.

No goals have been added yet -

please start adding some.

And at the same time,

I'm rendering this unordered list with dummy goal.

The dummy goal, because currently

we have no way of outputting actual goals.

If we have a look at the JavaScript file in the starting

code, you see, I already created

a very simple view app for you there,

which is connected to the DOM, and which has some data.

Though the data it does have is just a goals array

with an empty array initially.

And now here's my problem, which I want to solve with Vue.

If this array is empty, as it initially is,

then this unordered list should not be shown,

it should not be part of the DOM,

and instead this paragraph should be shown.

On the apprehend, if we do have goals,

because we added some here in JavaScript,

or because later we added code to grow this list here.

If we do have goals,

then I want to show this unordered list,

I want to render this in the DOM,

I want to include this in the page,

and I don't want to show this paragraph.

So we need conditional rendering.

And if you think about modern web applications,

that is something you need a lot.

If you, for example,

have a web application that fetches data from a server,

you might want to show a loading spinner whilst you're

waiting for the data to arrive.

This is actually something we'll build together

a little bit later in the course.

So showing different content, conditionally

when certain conditions are met

is a typical problem you have in front-end web development,

and Vue makes it easy for us to solve it.

Let's see how we can render a content

conditionally with Vue.