Exercise 1 - Half-filled Slot

Introduction - Why Active Learning, and how to set up for the exercises (setting up is easy)

2:35

Basic Slots

3:41

VSRating Component

2:58

Named Slots - how to have two slots in one component

3:20

Exercise 1 - Half-filled Slot

1:59

Exercise 1 Answer

0:59

Exercise 2 - Rounded Ratings

0:27

Exercise 2 Answer

1:42

Exercise 3 - Max Rating

0:36

Exercise 3 Answer

0:33

Scoped Slots and Slot Props

5:09

Exercise 4 - Half-Filled, Again

0:23

Exercise 4 Answer

1:27

Exercise 5 - Feature Parity

0:49

Exercise 5 Answer

0:28

Comparing Solutions

3:20

The Let Component

3:28

Exercise 6 - Double Let

0:29

Exercise 6 Answer

1:51

Conclusion

0:59

0% done with Advanced Components - Slots I

1:59 | Published on 2/7/2020 |
|

Chapter 1 of 5 in Advanced Components: Slots

Exercise 1 - Half-filled Slot

Be sure to get the code from the Github Repo.

Hints are below. Read at your own risk.

Hint 1:

<template #half-filled>
  <font-awesome-icon icon="adjust" />
</template>`

Hint 2:

v-else-if="rating - index == 0.5"

What do others think of VueScreencasts?

"Very nice thanks"

—Henryque

"Great channel."

—The Nerdy Dev

"Saved me loads of time!!"

—Jack Simple

"Thank you!"

—Артем Єрко

Take your career to the next level