0% done with Advanced Components: Slots II (Dynamic Slots)
1:58
|
Published on
2/13/2020
|
|
Chapter 2 of 5 in Advanced Components: Slots
Exercise 1 - Head and Foot slots
Your assignment is to make the #head and #foot slots in VSTable.vue.
The component usage will look like this:
<VSTable :items="projects">
<!-- ... item slot template omitted ... -->
<!-- new code -->
<template #head>
<th>Name</th>
<th>
<font-awesome-icon icon="star" />
<font-awesome-icon icon="star" />
<font-awesome-icon icon="star" />
</th>
<th>Language</th>
<th>Here Be Dragons
<font-awesome-icon icon="dragon" />
</th>
<th>Actions</th>
</template>
<template #foot="{items}">
<td><strong>Totals</strong></td>
<td>{{sumBy(items, 'stargazers_count')}}</td>
<td></td>
<td>{{sumBy(items, 'open_issues')}}</td>
<td></td>
</template>
</VSTable>
What do others think of VueScreencasts?
"Excellent tutorial. Thank you!"
—luminaia
"Thanks, really liking these videos."
—Mustahsinul Moula
"Great video as always, I really like the idea of basing the video in terms of features, as someone only looking to learn particular feature can get benefits from the video. Also, I really like you going through what we have done in the video at the end, it really helps in better understanding."
—Paurakh Sharma Humagain
"Dude, it's an excellent video. Soothing voice, extensive and crystal clear explanations, troubleshooting common issues... You do it and you do it well. Keep up the good work & congratulations :-) Subscribed without the slightest hesitation"
—BillyBobBonnet