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?
"Thank you, work for beginner like me. Big thumb for you!!!"
—Rivera Daniel
"Thanks @Vue Screencasts!! This video helped me a lot in understanding Vuex, and in answering questions that I have, which I can't find answers for on StackOverflow. Keep up the good work!!"
—kidgr33n
"Here I found answers to questions that I couldn't formulate before."
—Almas Kamitov