Back to the Learning!

Laracasts is packed full with over 1,000 lessons just like this one.
Sign up to get full access or log in to your account and sit back.

Watch everything for $15/mo Log In

Learn Vue 2: Step By Step

Subscribe to Series

Reusability: Part 2

Episode 41 Run Time 15:19

Let's continue with our accordion component refactor. In this lesson, we'll create two components: Accordion and AccordionItem. This will allow us to use a data-driven approach to declaring the visibility of each item's associated body.

View the extended source code for this lesson on GitHub.

Tags vue accordion

Publish Date: May 25, 2018

Previous Next

Looking for the archived Disqus comments?

01

Episode 1 Run Time 4:13

Basic Data Binding
02

Episode 2 Run Time 3:03

Setup Vue Devtools
03

Episode 3 Run Time 5:27

Lists
04

Episode 4 Run Time 5:04

Vue Event Listeners
05

Episode 5 Run Time 5:57

Attribute and Class Binding
06

Episode 6 Run Time 6:20

The Need for Computed Properties
07

Episode 7 Run Time 5:02

Components 101
08

Episode 8 Run Time 2:36

Components Within Components
09

Episode 9 Run Time 6:21

Practical Component Exercise #1: Message
10

Episode 10 Run Time 5:47

Practical Component Exercise #2: Modal
11

Episode 11 Run Time 14:58

Practical Component Exercise #3: Tabs
12

Episode 12 Run Time 5:59

Component Communication Example #1: Custom Events
13

Episode 13 Run Time 4:03

Component Communication Example #2: Event Dispatcher
14

Episode 14 Run Time 5:54

Named Slots in a Nutshell
15

Episode 15 Run Time 3:57

Single-Use Components and Inline Templates
16

Episode 16 Run Time 9:31

Webpack and vue-cli
17

Episode 17 Run Time 3:48

Hot Module Replacement
18

Episode 18 Run Time 8:01

Vue Ajax Requests With Axios
19

Episode 19 Run Time 17:00

Object-Oriented Forms: Part 1
20

Episode 20 Run Time 13:15

Object-Oriented Forms: Part 2
21

Episode 21 Run Time 8:30

Object-Oriented Forms: Part 3
22

Episode 22 Run Time 18:30

Webpack Config From Scratch
23

Episode 23 Run Time 10:14

This is Laravel Mix
24

Episode 24 Run Time 4:28

Shared State 101
25

Episode 25 Run Time 8:38

Custom Input Components
26

Episode 26 Run Time 16:50

Vue SPA Essentials: Routing
27

Episode 27 Run Time 15:01

SPAs and the Backend
28

Episode 28 Run Time 2:30

Vue Filters
29

Episode 29 Run Time 14:08

Dedicated Form Components
30

Episode 30 Run Time 13:05

Testing Vue: Part 1
31

Episode 31 Run Time 8:36

Vue Component Responsibility
32

Episode 32 Run Time 4:42

Vue Subclassing
33

Episode 33 Run Time 7:55

Scoped Slots
34

Episode 34 Run Time 11:58

Wrap Existing Tools into Components
35

Episode 35 Run Time 19:01

Create a Testimonials Component With Me
36

Episode 36 Run Time 9:31

The Difference Between Debounce and Throttle
37

Episode 37 Run Time 15:54

Mega Menus and One-to-One Relationships
38

Episode 38 Run Time 7:04

Vue Portal Use Case #2
39

Episode 39 Run Time 18:44

Workshop - Contact Support Modal
40

Episode 40 Run Time 7:08

Reusability
Episode 41 Run Time 15:19

Reusability: Part 2
42

Episode 42 Run Time 11:15

Fixed to the Top
43

Episode 43 Run Time 5:31

Fixed to the Top: Part 2
44

Episode 44 Run Time 18:17

Tooltips Three Ways
45

Episode 45 Run Time 5:25

Render Functions: Part 1
46

Episode 46 Run Time 9:44

Extract and Generalize: Infinite Scrolling Refactor
47

Episode 47 Run Time 14:54

Count Up
48

Episode 48 Run Time 12:35

Conditional Visibility and Vue Transitions
49

Episode 49 Run Time 11:22

Two-Way Databinding Review

Back to the Learning!

Learn Vue 2: Step By Step

Reusability: Part 2

Basic Data Binding

Setup Vue Devtools

Lists

Vue Event Listeners

Attribute and Class Binding

The Need for Computed Properties

Components 101

Components Within Components

Practical Component Exercise #1: Message

Practical Component Exercise #2: Modal

Practical Component Exercise #3: Tabs

Component Communication Example #1: Custom Events

Component Communication Example #2: Event Dispatcher

Named Slots in a Nutshell

Single-Use Components and Inline Templates

Webpack and vue-cli

Hot Module Replacement

Vue Ajax Requests With Axios

Object-Oriented Forms: Part 1

Object-Oriented Forms: Part 2

Object-Oriented Forms: Part 3

Webpack Config From Scratch

This is Laravel Mix

Shared State 101

Custom Input Components

Vue SPA Essentials: Routing

SPAs and the Backend

Vue Filters

Dedicated Form Components

Testing Vue: Part 1

Vue Component Responsibility

Vue Subclassing

Scoped Slots

Wrap Existing Tools into Components

Create a Testimonials Component With Me

The Difference Between Debounce and Throttle

Mega Menus and One-to-One Relationships

Vue Portal Use Case #2

Workshop - Contact Support Modal

Reusability

Reusability: Part 2

Fixed to the Top

Fixed to the Top: Part 2

Tooltips Three Ways

Render Functions: Part 1

Extract and Generalize: Infinite Scrolling Refactor

Count Up

Conditional Visibility and Vue Transitions

Two-Way Databinding Review

Want us to email you occasionally with Laracasts news?