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...