Join Adocasts Plus for $8/mo, or sign into an existing Adocasts Plus account, to get access to all of our lessons.
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.
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
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?
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!!
Thanks! I found it. A typo… was missing the in organization. That's why you don't code late at night.
Anytime! Awesome, I'm glad to hear you were able to get it fixed up! As a morning person, I can concur! 😄
