Chapters

44 Chapters | 4:19:56 |

01

Project Setup

4:22
02

Page 2: Product Show Page

6:59
03

Current Product Id

4:56
04

The Dynamic Component

7:24
05

AJAX & Delayed Rendering

7:18
06

Making the Title Component Less Smart

3:59
07

Product Template & Color Selector

5:06
08

Cart API & Data

5:58
09

Add To Cart

4:28
10

Loading Animations & Quantity Input

5:01
11

External DOM Updates

6:35
12

New Page, New Webpack Entry

6:51
13

Sharing Vue-ish Logic: Mixin Basics

5:56
14

More Mixin Magic

8:11
15

The Cart Page

5:02
16

Loading the "Complete" Cart

6:35
17

No Data Duplication! Fancy Computed Prop

5:12
18

Parallel AJAX with Promises

7:29
19

Cart Structure

5:24
20

Inventing a Proper v-for :key

5:56
21

Accidentally Modifying Prop Objects

8:18
22

Emitting up the Component Tree

5:13
23

Quantity: Updating Data & Saving to the Server

4:35
24

More Mixin Logic: Updating Quantity in Header

5:02
25

Remove From Cart

4:08
26

"Add to Cart Controls" Component

8:09
27

Finishing the Cart Controls Component

5:39
28

Featured Sidebar

5:05
29

Add to Cart Controls on the Sidebar

7:08
30

Deep and Smart Watchers

8:15
31

Advancing Between Cart & Checkout

7:03
32

Intro to CSS Transitions

3:36
33

Vue Transitions

8:51
34

Transition Name & Mode

6:16
35

Transitioning a Prop Change

3:24
36

Checkout Form

5:52
37

Reusable "Form Input" Component

5:52
38

v-model on a Custom Component

4:10
39

v-bind Many Props

6:10
40

Checkout Submit

7:26
41

Unexpected Server Errors

3:38
42

Form Validation

4:28
43

Client-Side Validation

5:29
44

Losing Reactivity

7:27

> JavaScript Frameworks & Tools > The Delightful World of Vue Part 2

Buy Access to Course

38.

v-model on a Custom Component

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Challenge

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

4 Comments

Sort By

Login or Register to join the conversation

Ruslan 10 months ago edited

Hi ,
For Vue 3 it does not work: @input="$emit('input', $event.target.value)" and @input="form.customerName = $event"

As I understand, "input" - reserved. On parent we got Event vs String.
I fixed by event rename:

@input="$emit('value-changed', $event.target.value)"
@value-changed="form.customerName = $event"

May be It's wrong solution?

BR.
Ruslan.

|

Victor SFCASTS Ruslan 10 months ago edited

Hey Ruslan,

Yes, you're right, in Vue 3, the v-model contract changed and now it's:

:modelValue="someData"
@update:modelValue="someData = $event"

// and inside the child you should emit:

this.$emit('update:modelValue', newValue);

Instead of how it was in Vue 2:

:value="someData"
@input="someData = $event"

// where inside the child you expected:
$emit('input', value);

So your workaround isn’t "wrong", it’s just a custom event scheme. It just means you use your own contract instead of using Vue’s v-model convention. That’s fine if you like it, but it means your component won’t work with v-model syntax out-of-the-box. Otherwise, look at the v-model example for Vue 3.

I hope this helps!

Cheers!

1 |

Markus L. 4 years ago

Heyho ! Seems there's a little error in vue 2 v-model explanation at the solution popup of chapter 38 challenge ? Shouldn't it be @input="client.name=$event" instead of @input="$emit('input', $event.target.value)", because it's the outer component in that context ?

|

Victor SFCASTS Markus L. 4 years ago

Hey DocLommy,

You're right, we display incorrect code block in that part, I just fixed it, the new code block is: https://symfonycasts.com/sc...

Thank you for reporting this!

Cheers!

|

This course is also built to work with Vue 3!

Vue 2

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.1", // 5.15.1
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.3
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.2.0
        "eslint-plugin-import": "^2.19.1", // 2.22.1
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.12
        "vue-loader": "^15.9.1", // 15.9.4
        "vue-template-compiler": "^2.6.11", // 2.6.12
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}

Previous Chapter

Next Challenge