Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Vue.js Basics!
You have completed Vue.js Basics!
Preview
Use v-for to loop through an array of objects and add Vue directives to provide interactivity to each and every item in the array.
Review
Dot notation to access a property in an array of objects:
Template
<ul>
<li v-for="item in items">
<a href="item.url">{{item.name}}</a>
</li>
</ul>
Data
new Vue({
el: '#app',
data: {
items: [
{
name: 'Chewie',
url: 'https://www.someurl.com'
},
{
name: 'Archibald',
url: 'https://www.someotherurl.com'
},
]
}
});
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
accordion menu of different pieces of
media, books, videos and streaming videos.
0:00
Imagine that this is the front end for
a public library.
0:02
Libraries don't just deal in books
these days, but in all sorts of media,
0:06
magazines, DVDs, streaming videos,
CDs, Ebooks and more.
0:10
So we're going to build a way
to filter items by type and
0:15
this filter will dynamically populate with
different media items based on our data.
0:18
We'll also be able to click any piece of
media to display more information about
0:23
that piece of media.
0:28
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up