Using Conditionals and Rendering Lists
This is the lesson that history teaches: repetition.
Gertrude Stein
Conditional Rendering with v-if
https://jsfiddle.net/jordank/r7v8fbp0/6/
You can show or hide a DOM element using vi-if . vi-if is placed on a DOM element and it takes an argument that must resolve to true or false. If it's true the element is rendered, if false it is removed. See below.
// HTML
<p v-if="show">Hi</p>
// VueJS
data: {
show: true
}
In the above example the paragraph contaning 'Hi' is shown since show resolves to true.
Additionally if you want to show an element if the results of your v-if return false you can do that as follow.
// HTML
<p v-if="show">Hi</p>
<p else>Bye</p>
// VueJS
data: {
show: false
}
In the above example the paragraph containing 'Bye' will be displayed. v-else keys off the first v-if that comes before it.
Using an Alternative v-if Syntax
https://jsfiddle.net/jordank/r7v8fbp0/9/
Something to keep in mind is that v-if makes a good partner with the HTML5 element template. The template element is used to wrap other elements. The special thing about it is that it is not rendered in the DOM. It has no effect on layout at all, it's only use is as a grouping mechanism. Useful for scenarios where you don't want the side effects of wrapping something in a div but you still need a targeting container.
<template v-if="show">
<h1>Heading</h1>
<p>Inside a template</p>
</template>
Don't Detach it with v-show
https://jsfiddle.net/jordank/r7v8fbp0/11/
v-show works exactly like v-if with one different. Where v-if will completely remove the DOM element, v-show instead will hide the DOM element using display: none .
Rendering Lists with v-for
https://jsfiddle.net/jordank/ny4rknbq/4/
To loop through lists (arrays and objects) use v-for . v-for will loop through the list the proper number of times and pull out the specified data through each iteration through the list. See the example below.
// HTML
<ul>
<li v-for="ingredient in ingredients">{{ ingredient }}</li>
</ul>
// VueJS
data: {
ingredients: ['meat', 'fruit', 'cookies']
}
v-for - VueJS directive that loops through lists.
ingredient - A name you come up with (can be anything) that is used as a holder for the content that is parsed through each iteration of the list.
ingredients - The list you want to loop through
{{ ingredient }} - Used, in this case, to print out the the result of each loop through the list.
Getting the Current Index
https://jsfiddle.net/jordank/ny4rknbq/5/
The position of an item in an array can be accessed by setting up another variable with the variable you are using to store the contents of the looped item.
// HTML
<ul>
<li v-for="(ingredient, i) in ingredients">{{ ingredient }} ({{ i }})</li>
</ul>
// VueJS
data: {
ingredients: ['meat', 'fruit', 'cookies']
}
i - A container used to store the position of the item in the loop.
Using an Alternative v-for Syntax
https://jsfiddle.net/jordank/ny4rknbq/8/
You can use the DOM element template to structure your loops outputs.
// HTML
<template v-for="(ingredient, index) in ingredients">
<h1>{{ ingredient }}</h1>
<p>{{ index }}</p>
</template>
Looping through Objects
https://jsfiddle.net/jordank/ny4rknbq/15/
Looping through an object is very similar to looping through an array. The main difference is that you are probably going to want to access a property of the object which is accomplished using dot syntax as shown below.
// HTML
<li v-for="person in persons">{{ person.name }}</li>
// VueJS
data: {
persons: [
{name: 'Max', age: 27, color: 'red'},
{name: 'Anna', age: 'unknown', color: 'blue'}
]
}
In the above example a two item list will be generated with the names 'Max' and 'Anna'.
-
https://jsfiddle.net/jordank/ny4rknbq/20/
Another way to loop through objects is using a nested v-for . This can be used to print all of the properties of an object. Additionally you can also print the content of the Key/Value pairs similar to how you print the index in an array loop. And finally you can also print the index of the data much like you do with an array.
// HTML
<li v-for="person in persons">
<div v-for="(value, key, index) in person">{{ key }}: {{ value }} ({{ index }})</div>
</li>
// VueJS
data: {
persons: [
{name: 'Max', age: 27, color: 'red'},
{name: 'Anna', age: 'unknown', color: 'blue'}
]
}
person - A name you come up with (can be anything) that is used as a holder for the content that is parsed through each iteration of the list.
persons - The list you want to loop through.
value - A name you come up with (can be anything) that is used as a holder for the Value of each Key/Value pair.
key - A name you come up with (can be anything) that is used as a holder for the Key of each Key/Value pair.
index - A name you come up with (can be anything) that is used as a holder for the Index of the item in the object.
Looping through a List of Numbers
https://jsfiddle.net/jordank/ny4rknbq/26/
Looping through to a specified number is simple. It does not required any direct calls to the Data object or anything like that.
// HTML
<span v-for="n in 10">{{ n }}</span>
n - A variable named to your choosing.
10 - An integer you'd like to look to.
Keeping Track of Elements when Using v-for
https://jsfiddle.net/jordank/ny4rknbq/30/
You can use a key when using v-for . What this does is it allows VueJS to keep track of changes to the looped item more precisely. It stores the order of the element and also the element itself. This would be something you would consider using when you know the looped content may be changed and thusly require more careful monitoring.
If you run into an issue where you are updating items in a list and they are not appearing in the order you expect them to be then this may be the solution.
<li v-for="(ingredient, i) in ingredients" :key="ingredient">{{ ingredient }} ({{ i }})</li>
:key - Here we are using v-bind to the on the key attribute. The assumption is that we know each ingredient in this list will be there on once. Therefor using the ingredient as the value for the key will make sure each item get's a unique identifier.