In the last episode, we talked about computed versus watch, and we're really starting to discover all of the Vue tools that are available out there. So we've seen how to data bind and we should be comfortable with how this structure is starting to connect. We've made some methods and we've used the computed and watch functionality. We've added some click events here to our code previously. And in the last example, we've sort of connected a question and answer system and show you how you might go and set up something like that. From here, I want to talk about something that's actually kind of basic, which is rendering.
And list rendering. I guess it's basic in the sense that it's just a list, it's just an array. But if you think about how you've worked with arrays previously, jQuery and JavaScript, you probably used an each or a for loop. And so Vue has this thing called V4. And I had a little bit of trouble with this one because I'm very used to the PHP syntax of a for loop or a for each. And a for each would go like, for each cats as cat, and then inside of the loop, you would reference the individual cat instance. And the variable or the value cat, is basically, is created each time it loops through and is overwritten. Well V4 does a little bit different and its similar concept, but kind of reverse. And so in the example here provided, it says UL ID example one, L I V4 item in items.
And so it's running item first versus items first, and that's just how it works. So you got to note that sort of syntax change versus another library that you might be familiar with, for V4 item in items, but works pretty much the same way. A couple of exceptions in that you're not wrapping it on the outside. It is the element itself. So the element that itself that you want to repeat, you put the V4 on. So in the example, here with the allies. So if we were to grab this code and implement this, I'm going to just paste this inside my container again. So it's just container ID app, ID example one, V4 item and items, item dot message. And the L I, and then we have our array syntax here for our message. So we'll just paste this into data and then tab this in so you can see items and then that bracket, message foo, message bar.
Now, if we refresh this, you'll see foo and bar, and it'd be very easy to go and add additional ones to this, say, cat, I'm going format this a little nicer. So we'll fix this and get rid of that extra space. And now we see foo bar and cat. And pretty easy, that's just one thing to kind of know, it's a little weird at first, but you'll get the hang of it. It's again, it's item in items. And then you can reference the individual item and the value here. So if you were to expand this, you could go and expand this with that comma and then where you have a message, you could say name, colon, Trevor. And then I could specify a name for that first one. So item dot message. And then I could say item dot name as we've done here now.
So yeah, you can see Trevor and foo, so pretty easy to implement. Now, inside [inaudible 00:03:55], we have access to parents go [inaudible 00:03:57] also supports an optional second argument for index of the current item, which you would expect with any loop, is the reference to that key-value or index number. So item index in items. So if you need to reference it that value, you can reference that value there by adding the parentheses and the index. And you can see the zero and one from the array. So V4 with an object, of course, the value in object and same structure as previous. You just specify the object. And so if you have a [inaudible 00:04:34] object or something you're consuming, you can specify the value of the object, the same way. V value for key and object, also exactly the same.
And here are some options for key. So you can specify a key item and that ID. And this is pretty cool. If you wanted to go in and set those keys to the given values that you may be able to reference later on. Now working with those arrays, working with lists. You need those values and you should be familiar with push, I imagine, which is allows you to add a value. So you have the same stuff here that you have in JavaScript. You have push, pop, un-shift, shift, splice, sort, and reverse. And replacing RRA. So item, message, match, foo. Again, if you want to get into a little bit deeper into this, detection of caveats and displaying filter and sorting results. So these are pretty cool for sorting results. So here they're using computed properties or another example where you would want to use a computer property. Even numbers. So return this number is going to go and get the numbers filter. So now it's going to call a filter function, return numbers that are divisible by two, that is equal to zero.
And then you would be able to go and just get even numbers from a list. A V4 with a range, so V4 N in 10, and then specify N. So if you need to do something a certain amount of times, you could use V4, N in 10 or whatever value you want to go and specify there. V4 on a template, we haven't talked about templates just yet. So we'll come back to that.
V4 with VF. So you can check to see if the V, only show if the element is in fact completed and completed could be another method, or it could be a value inside. V4 and a component, which we haven't gotten to yet. And here's a quick example of showing them how you could add it to do, and then press enter and then deleting a value with the IED to do, plus plus on adding values to the produce.
So pretty cool stuff inside of the list on working with them. My best suggestion for working with lists or arrays is just take them slow. There's a tendency kind of jump in there and you can do stuff really fast and really cool. And then you make a syntax error. And sometimes those syntax errors are very difficult to fix, even with the Vue dev tools. So just take them slow, go through your code, really think about what each thing is doing, organize your code and make it nice.