Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

Join for $8.00/mo Sign in
robot mascot smiling
Previous
Sign Up to Track Progress
Next

Creating & Listing Sortable Course Lessons

In this lesson, we'll add the ability to create new lessons within a course's module. We'll then list the lessons within their designated module using the order specified by the user.

Tom Gobich
Author
Tom Gobich
Published
Dec 13, 24
Duration
19m 30s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Visit Website

Get the Code

Download or explore the source code for this lesson on GitHub

Repository

Chapters

00:00 - Defining our Lesson Validator
02:17 - Creating New Lessons with our Store Lesson Action
03:51 - Adding the Lesson Controller's Store Route Handler
04:26 - Registering the Lesson Store Route
04:47 - Listing Lessons with the Sortable Lessons Component
08:35 - Setting Up the Lesson Form State Using A DTO
14:23 - Applying our Sortable Lessons Component
15:09 - Testing & Fixing Hiccups

Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

Join for $8.00/mo Sign in

Join The Discussion! (4 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. aaron-ford
    Adocasts Plus Subscriber
    Commented 28 days ago

    The line

    statusId: props.organization.statuses.at(0)?.id

    works fine in my SortableModules, but in the SortableLessons, it is breaking the page due to 'Cannot read properties of undefined (reading 'statuses').' I have looked through all the files I thought could be related, but haven't found any differences. Any suggestions on what could be causing it?

    1

    Please sign in or sign up for free to reply

    1. tomgobich
      Adocasts Plus Subscriber
      Commented 28 days ago

      Hi Aaron!

      It sounds like your organization is undefined within the SortableLessons component. If it works fine within SortableModules then it should be populated on the page okay. Make sure you've got it within the props being passed into SortableLessons! 

      <SortableLessons
  v-model="modules[index]"
  :organization="organization" <!-- 👈 -->
  :course="course"
/>
      
  
      
    
      
      Copied!

      If it's there, then make sure it is within SortableLessons props.

      const props = defineProps<{
  organization: Organization // 👈
  course: CourseDto
  modelValue: ModuleDto
}>()
      
  
      
    
      
      Copied!

      I'd reckon it's one of those two, but if it is in both of those spots, I'd recommend using the Vue DevTools to inspect the flow of this prop to see where it might be getting lost.

      Hope this helps!!

      0

      Please sign in or sign up for free to reply

      1. aaron-ford
        Adocasts Plus Subscriber
        Commented 27 days ago

        Thanks! I found it. A typo… was missing the in organization. That's why you don't code late at night.

        1

        Please sign in or sign up for free to reply

        1. tomgobich
          Adocasts Plus Subscriber
          Commented 26 days ago

          Anytime! Awesome, I'm glad to hear you were able to get it fixed up! As a morning person, I can concur! 😄

          0

          Please sign in or sign up for free to reply