Original subtitles

1 1

So as outlined, I wanna show this paragraph 2

2

if we have no goals, 3

3

so if this goals array here is empty. 4

4

And I wanna show this unordered list if we do have goals. 5

5

So if we have at least one item in this goals array. 6

6

That's my idea here. 7

7

Now how can we implement this? 8

8

First of all, you already noticed 9

9

I'm no longer using this split screen. 10

10

I no longer have JavaScript and HTML on top of each other, 11

11

because I think we got used to how Vue worked with HTML, 12

12

and I now wanna have more space available 13

13

for HTML and JavaScript. 14

14

Hence, I'll just switch between those files. 15

15

But that's just a side note. 16

16

How can we now make sure that this paragraph 17

17

only shows up if we do have no goals? 18

18

So if goals is an empty array. 19

19

Well, Vue has a directive for us, 20

20

a directive we can add on the element 21

21

that should be rendered conditionally. 22

22

And that's the v-if directive. 23

23

So it's basically like a if statement in JavaScript code. 24

24

You check a certain condition, and then you have code 25

25

that is executed if that condition is met. 26

26

And we can do the same in HTML with v-if. 27

27

We pass a certain condition between the double quotes here, 28

28

and as always when using Vue directives 29

29

here between the double quotes 30

30

we can add in a JavaScript expression, 31

31

and we can also refer to our data, 32

32

our methods, our computed properties and so on. 33

33

And here we can check if goals.length = 0 34

34

Goals is simply this data property I defined before. 35

35

It's an array and therefore it has a length property, 36

36

and if length is zero, that means we have no goals, 37

37

and then this condition is met, and this tells Vue that. 38

38

Then this paragraph and all its content, 39

39

including any possible child elements we might have, 40

40

should be rendered. 41

41

So when I'll save it and reload, 42

42

nothing changes because initially goals is empty. 43

43

But if I go to AppJS and I do add a goal here, 44

44

like finish the course, a simple string, let's say. 45

45

If I do that and reload, 46

46

now you'll see the paragraph is gone. 47

47

And it's not just gone visually on the screen, 48

48

if we inspect this, we see in the developer tools, 49

49

it's really not there. 50

50

We have the another list, but we have no paragraph. 51

51

Instead we have this place holder, 52

52

which Vue uses internally to find out 53

53

where to add the paragraph 54

54

if our goals should be empty again. 55

55

But that's what we get thanks to v-if. 56

56

Now in a static application, which isn't truly dynamic 57

57

because we have no way of changing goals right now, 58

58

this is not too exciting, but it is a start. 59

59

Now let's make it a bit more exciting though. 60

60

Let's say when this button is pressed, 61

61

we wanna get the value entered in this input 62

62

and use that as a goal 63

63

which then is added to this goals array. 64

64

To implement that, we can add a method 65

65

in the methods option here, 66

66

addGoal sounds like a fitting name. 67

67

And in my data object here, besides storing the goals, 68

68

I also wanna store whatever the user currently entered 69

69

in his input. 70

70

So here I have my enteredGoalValue, 71

71

which is an empty string. 72

72

Of course you can name the property however you want. 73

73

And here in the addGoal method, I can now reach out to goals 74

74

and use the push method, which is available 75

75

on every JavaScript array, and therefore of course, 76

76

also on that array, 77

77

to push this enteredGoalValue, 78

78

so whatever the user entered here, 79

79

to my goals, as a new goal. 80

80

And now in index HTML, we can bind both things. 81

81

We can bind the input with v-model 82

82

to this enteredGoalValue data property, 83

83

like this, 84

84

and on the button with @click, 85

85

we can point at this method which we added, 86

86

so at the addGoal method, 87

87

and point at it so that this method is executed 88

88

when the button is clicked. 89

89

And now we do have a way of changing our goals. 90

90

That means that we now can also get rid 91

91

of this hard-coded goal here 92

92

so that we start with an empty array again. 93

93

And if we now save everything and reload, 94

94

we see that we start with this paragraph, 95

95

but now if I add a goal like finish the course 96

96

and click the button, you see the paragraph disappears. 97

97

We don't see the goal yet 98

98

because we haven't learned how to output that, 99

99

but we see that the conditional rendering with v-if works. 100

100

Now let's dig a bit deeper into v-if.