The Vue.js Master Class 2024 Edition
INCLUDED IN YEARLY/ LIFETIME PLANS

This lesson is for members. Join us?

Subscribe now to get instant access to this course, plus a full library of Vue.js courses tailored to the plan you choose.

Start learning or

Create Text Field Component with defineModel

Let’s make the project title editable right on the page. In this lesson, we’ll create a reusable text field component using defineModel to enable real-time updates with two-way binding.

Links

GO PREMIUM
UnlockTo unlock this feature
DOWNLOAD VIDEO HD SD
GO PREMIUM
UnlockTo unlock this feature
Transcript icon
DOWNLOAD TRANSCRIPT
The Vue.js Master Class 2024 Edition
  • Chapter 8

CRUD Operations

93.
Create Dynamic User Profiles
7:03
94.
Using Pinia for Efficient Data Loading and Caching
6:27
95.
Use useMemoize from VueUse to Optimize Pinia Loader Functions
3:20
96.
Implement Stale While Revalidate with Pinia and useMemoize
FREE
6:07
97.
Update Stale Data with Fresh Data
3:17
98.
Set Up Eslint 9 with Flat Config in Vue.js
8:22
99.
Create a Vue.js Composable for Projects Collaborators
7:20
100.
Fetch and Collect Collaborators Across All Projects
9:28
101.
Use Vue.js Render Functions to Render Collaborators
4:46
102.
Load the Collaborators Without Impacting Page Loading Speed
5:03
103.
Reuse the Pinia Loader to Load Single Project
6:15
104.
Make the Pinia Loader Cache Invalidation Logic Reusable
7:00
105.
Fix a Little Bug with the Project Title Watcher
2:39
Create Text Field Component with defineModel
4:09
107.
Emit Custom Events on Input Blur
3:10
108.
Update Project Title in the Database
6:21
109.
Create a Toggle Component for the Project Status
6:00
110.
Update the Project Status in the Database
5:40
111.
Use Vue.js Props Destructure to Assign Default Values for Props
4:05
112.
Reuse the useCollab Composable in the Project Page
7:09
113.
Use defineModel with Textarea and Adjust the Database Schema
4:07
114.
It's Showtime: Apply Your Skills to Tasks!
2:44
115.
Add Tasks and Projects From Anywhere in the App
7:11
116.
How to Install and Use FormKit in Vue.js 3
5:24
117.
Create a Form for Tasks using FormKit
5:08
118.
Fetch the Select Fields Options from the Database
6:07
119.
Validate and Create Tasks
5:51
120.
Delete Tasks
8:45
NEXT CHAPTER
Wrapping Up