CONDITIONALS & LISTS | VueJS | Learning the Basics

00:00:01 welcome to the amazing world of view Jas
00:00:04 in this video I want to have a look at
00:00:07 how we can conditionally output some
00:00:10 content in our template in our Dom so
00:00:13 that we don't add or show a certain
00:00:15 let's say HTML element some text all the
00:00:18 time but only after certain condition is
00:00:20 met we'll also have a look at how we may
00:00:23 render lists to the Dom so how we could
00:00:26 render the items in an array to a list
00:00:29 in our web page let's dive into this in
00:00:32 this video I'm starting with a nice
00:00:36 little application here on J's file
00:00:38 again with the very very default so that
00:00:41 you can use for a view chess application
00:00:44 I get my app Dave here and in this app
00:00:47 Dave which is controlled by this view
00:00:49 instance down here of course I get a
00:00:51 button which allows me to well click it
00:00:54 and say show or hide something though
00:00:56 we're not executing any code right now
00:00:58 if you have a look at the quotation
00:01:00 marks of this Veon click directive here
00:01:03 and then I have two paragraphs which I
00:01:06 probably telling by their captions one
00:01:09 is show and hide conditionally I also
00:01:11 have a great horizontal line here which
00:01:13 will become very important later so
00:01:16 let's start by conditionally showing or
00:01:17 hiding this let's start with this first
00:01:20 paragraph I don't want to show this all
00:01:23 the time thankfully I have this nice
00:01:25 show property which is set to true
00:01:27 initially in my data object now what if
00:01:31 I wanted to use this show property as an
00:01:34 indicator if this first paragraph should
00:01:37 be visible or not well we can add a
00:01:40 directive to dispara graph again a
00:01:42 directive is an instruction view chess
00:01:44 will find in its template and it will
00:01:47 know what to do if it knows this
00:01:49 instruction well we're going to use a
00:01:52 directive which ships with view chess so
00:01:55 it will know what to do the name of the
00:01:58 directive is if so the name or the code
00:02:01 we have to use here is V if V – to let
00:02:05 view chairs know hey that is something
00:02:08 that concerns me and an AFS T directive
00:02:10 named all directives in view chairs look
00:02:12 like this use a V
00:02:14 – and then well the real name of this
00:02:17 directive so we if and we if then also
00:02:21 takes a value which we pass with equal
00:02:24 sign and then quotation marks and the
00:02:26 value here is now the well condition
00:02:31 which should determine whether we want
00:02:33 to show something here or not so here
00:02:36 I'm going to use my show property as
00:02:39 this condition because it's true or
00:02:41 false and that is what VF expects it
00:02:44 expects you get true or false to know
00:02:47 whether it should attach the element on
00:02:49 which it sits and all child elements to
00:02:51 the Dom or not that's also important we
00:02:54 have attaches and detaches it's not
00:02:57 hiding and showing it's not changing
00:02:59 your transparency it's really removing
00:03:02 it from the Dom or adding it to it
00:03:04 nothing in between so here with we have
00:03:08 show I'm now telling view chairs only
00:03:10 attach this paragraph and of course also
00:03:12 text inside the paragraph if show is
00:03:15 true which it is initially which is why
00:03:17 if I hit ctrl enter here I still see it
00:03:19 now in show/hide I can now change the
00:03:23 value of show and I want to set it to
00:03:25 whatever show is not right now so to
00:03:27 toggle between the two states so I'm
00:03:29 going to set it to not show to really
00:03:31 set it to false if it was true and to
00:03:34 set it to true if it was false so if we
00:03:37 now hit control enter again we see it
00:03:39 because initially it's true but if I hit
00:03:41 the button watch this part of our page
00:03:44 it disappeared because as I said it was
00:03:48 removed now interesting thing if we
00:03:50 inspect this part off the Dom here we
00:03:54 see am i visible and we see the button
00:03:56 but we see nothing in between but this
00:03:58 empty comment here so it really was
00:04:00 removed from the Dom if I click the
00:04:02 button again you see it's back there so
00:04:05 it's really added and removed as I said
00:04:08 before so this is how VF works and with
00:04:12 VF we also get V else we else can be
00:04:15 placed on an adjacent element to dyf
00:04:19 element here as long as it's the same
00:04:21 element so if we use VF on a paragraph
00:04:23 here we have to have an adjacent

00:04:25 paragraph
00:04:26 you can place Vee else now this means we
00:04:29 else is now only displayed if show is
00:04:32 false so if I click the button we see a
00:04:35 my wearable if I click it again we only
00:04:37 see M part-time visible this is how we
00:04:39 can use VF and we asked conditionally
00:04:42 show parts on our screen also important
00:04:45 besides we if we also get V show we
00:04:50 showed also works the same as we have
00:04:53 generally here we can say hooray I'm
00:04:58 here but the important thing is if I hit
00:05:02 ctrl enter it looks like it works the
00:05:06 same as we have right it's removed
00:05:08 whenever the with part is removed
00:05:10 however let's inspector to see the
00:05:12 difference here is our hooray I'm here
00:05:15 paragraph if I click show/hide you will
00:05:18 notice it's still there it's not removed
00:05:21 instead it's display is set to non so
00:05:24 this is the important difference we show
00:05:26 doesn't actually remove it from the Dom
00:05:29 it only changes the display to non so
00:05:32 it's no longer a player just played here
00:05:34 the important implication of course is
00:05:37 that removing it might be better
00:05:40 performance wise because it's really
00:05:42 gone it doesn't have to be rendered even
00:05:44 though you don't see it on the other end
00:05:46 you might have reasons why you want to
00:05:48 keep it around so you got both
00:05:49 possibilities with VF and we show and
00:05:52 with that you should have all the
00:05:54 flexibility you need now that were
00:05:57 conditionals let's now have a look at
00:05:59 lists so how can we output a list like
00:06:02 oh we got one year like this persons
00:06:04 list so let's say here below this
00:06:06 horizontal line that is why it's so
00:06:08 important I went out for the unordered
00:06:10 list and in this unordered list I went
00:06:13 out put let's say the names of my
00:06:15 persons now of course I could add a list
00:06:17 item here and I could access persons the
00:06:20 first element of course and then name
00:06:23 property like this now variate
00:06:25 control-enter we indeed see max here but
00:06:28 that's not really super convenient and
00:06:30 it's not reactive at all if we change
00:06:33 this list somewhere in our application
00:06:35 well that will not really get updated
00:06:37 where
00:06:38 not really able to dynamically add
00:06:41 multiple list items depending on the
00:06:43 length of the list we also have to or we
00:06:45 right now all have them have to code
00:06:48 them manually so that's not super
00:06:50 convenient instead we can use a number
00:06:53 directed so let me remove this code in
00:06:55 here and only list item I'm going to
00:06:58 place another directive which is called
00:07:00 v4
00:07:01 this also takes some value and we if we
00:07:05 told view chess the condition on whether
00:07:08 it should attach something well with v4
00:07:11 we tell view chairs that it should loop
00:07:14 through something so in the quotation
00:07:17 marks here we're writing the loop logic
00:07:19 and that would be that we want to loop
00:07:22 through all the persons so first I'm
00:07:24 going to choose a name for the variable
00:07:26 view chairs we'll use for each item in
00:07:29 this loop here and this is totally up to
00:07:32 you I'm going to name it person since we
00:07:35 do have a person yet but again this is
00:07:37 freely choose abble then we say in
00:07:40 persons so this is the syntax you may
00:07:43 know in your JavaScript loops so with
00:07:47 that I can now simply output person name
00:07:50 here I don't have to specify the index
00:07:52 because prison will change for each loop
00:07:54 iteration and if I now add control-enter
00:07:57 we see all three persons output there
00:08:00 because with v4 this list item element
00:08:03 is recreated as often as needed and so
00:08:05 is the text which is output free string
00:08:07 interpolation here and that is how we
00:08:09 can use a list or how we can render a
00:08:12 list with the four important side note
00:08:15 you can also get ex access to the
00:08:17 current index by simply enclosing person
00:08:21 in parentheses and adding a second kind
00:08:23 of argument here the argument is also
00:08:26 freely nameable by you I'm going to name
00:08:29 it index and this allows me to now also
00:08:32 output the index here which is reset for
00:08:35 each iteration so this starts at 0 of
00:08:38 course for the first element and then
00:08:40 goes up to 2 for the last element this
00:08:42 is the alternative syntax you can use if

00:08:45 you not only need access to the specific
00:08:47 element at the current iteration or at
00:08:50 the current a point of
00:08:52 time but also to the index of that
00:08:54 iteration we can get access to both with
00:08:57 that we had a detailed look at how you
00:08:59 can conditionally output data and how
00:09:02 you can use lists really a lot of useful
00:09:05 things here and hopefully something
00:09:07 which helps you in your view chess
00:09:10 application

You may also like