Coding

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