Lists section
The next bit of content we'll add to our page is the Amenities and Prices lists:
Figure 2.7. Lists section
If you look at the mock-listing sample, you'll see that the amenities and prices properties on the object are both arrays.
sample/data.js:
var sample = {
title: '...',
address: '...',
about: '...',
amenities: [
{
title: 'Wireless Internet',
icon: 'fa-wifi'
},
{
title: 'Pets Allowed',
icon: 'fa-paw'
},
...
],
prices: [
{
title: 'Per night',
value: '$89'
},
{
title: 'Extra people',
value: 'No charge'
},
...
]
}Wouldn't it be easy if we could just loop over these arrays and print each item to the page? We can! This is what the v-for directive does.
First, let's add these as data properties on our root instance.
app.js:
data: {
...
amenities: sample.amenities,
prices: sample.prices
}List rendering
The v-for directive requires a special type of expression in the form of item...