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

Listing & Creating Difficulties

In this lesson, we'll create a page to list the active organization's difficulties. Then, we'll add the ability to create a new difficulty and add a new color picker type to our FormInput component.

Tom Gobich
Author
Tom Gobich
Published
Nov 11, 24
Duration
15m 14s

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 - Difficulties Controller Index Route Handler
03:36 - Defining our Difficulty Index Route
04:12 - Creating the Difficulty List Page
09:46 - Viewing our List Page
10:16 - Adding a Color Hex Input to our FormInput Component
12:00 - Storing New Difficulties
14:50 - Testing our Add Difficulty Flow

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. usources
    Commented 3 months ago

    Hii, there is a bug, clicking on 'next lesson' redirects to 'refreshing partital page' data instend of 7.1

    1

    Please sign in or sign up for free to reply

    1. tomgobich
      Adocasts Plus Subscriber
      Commented 3 months ago

      Hi usources! Apologies about that, and thanks so much for letting me know! Should be fixed up now! 😊

      1

      Please sign in or sign up for free to reply

  2. martin-cervantes
    Adocasts Plus Subscriber
    Commented 2 days ago

    I'm creating a similar project. I have a controller for users.

    async show({ inertia }: HttpContext) { const users = await this.userService.getUsers() const serializedUsers = users.map((user) => user.serialize()) return inertia.render('usuarios', { users: serializedUsers }) }

    async destroy({ params, response }: HttpContext) { await this.userService.delete(params.id) return response.redirect().toRoute('users.show') }

    When I call router.delete(`/users/${id}`) from the view, everything seems to work fine. If I check Fetch/XHR in the browser, I get the DELETE and the new GET of users with the data updated correctly, but the deleted user is still visible in the view. Any idea what the problem might be?

    1

    Please sign in or sign up for free to reply

    1. tomgobich
      Adocasts Plus Subscriber
      Commented 2 days ago

      Hi Martin!

      Sounds like it is most likely a reactivity issue. When the redirect occurs, Inertia will use the new data to update the props of the page. If the reactivity from the props is severed, then that would cause those props and your view to become out of sync.

      You should be able to use Vue Devtools to inspect and verify that the props are actually getting updated. Then, follow your usage of that prop to see exactly where the reactivity is being severed.

      You could also do a simplified sanity check to ensure that the flow is indeed working.

      <script setup>
defineProps({
  users: UserDto[]
})
</script>

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.email }}
    </li>
  </ul>
</template>
      
  
      
    
      
      Copied!
      
      
        
      
      
      
    
      
  
      
  

      • inertia
      • pages
      • Usuarios.vue
      0

      Please sign in or sign up for free to reply