TypeScript and Vue 3

Creating an Edit Page Exercise

Ben Hong

Ben Hong

TypeScript and Vue 3

Check out a free preview of the full TypeScript and Vue 3 course

The "Creating an Edit Page Exercise" Lesson is part of the full, TypeScript and Vue 3 course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to create an edit page using all of the knowledge gained throughout the course on the 11-exercise branch.


Transcript from the "Creating an Edit Page Exercise" Lesson

>> The final exercise per say is really about trying to put all of this together. And so this time now we're gonna have base. What we're gonna do is, we're gonna create an edit page, cuz right now you have the ability to delete something, but you don't have the ability to modify an existing type.

And so this will kinda stretch some people. In this regards, let me actually go ahead and do some something real quick. In case anyone asked me about that, I have an alias inside of my terminal because I decided that, git reset ---soft Head-1 was too much type. So git never mind, is my way of just saying that, I don't want the last one, so get rid of it for me.

So, let me just drop that. And then check out git push origin main --force. Okay, now that should be gone. All right. So, we're gonna check out 11-begin. And so, just to give you just a little bit of a scaffold. What we're gonna do checkout 11-exercise, is we're going to go inside the dishes page.

This is where y'all have been working anyways. And then actually it went away, I need to dish card. And the dish card is going to get another button called editDish. So, this will be broken, just so you know when you get this. So let's make it a yellow button, is warning, and then say edit.

And in fact you know what I'll leave you to hook it up yourself. And then edit. There we go. And so, when you click on this, what I want you to do is either up to you. You can create a brand new page, where router will grab it, and then you can use your store to fetch the thing.

Type everything. Let's see where you can get to in the next 15 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now