Posted 6 days ago by
memsbdm (@memsbdm) Adocasts Plus Subscriber
@tomgobich @memsbdm @tomgobich @memsbdm

4

1

2,227

Vue Sortable

Hi @tomgobich ! I have a quick question concerning your inertia course. On your deployed app, there is the Sortable feature on the /courses page. I could not find the corresponding code on your repo or your other branches on GitHub. Can you share the code of that part? I am having troubles with <Table> components and some hydratation mismatches so I can maybe understand what I am doing wrong :)

(Amazing course by the way!)

Join The Discussion! (4 Replies)

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

  1. memsbdm
    Adocasts Plus Subscriber
    OP
    Commented 6 days ago

    By the way I am trying to use <Sortable> inside a <TableBody> and it says Hydration node mismatch however when I am using it without Shadcn components it is working just fine. I tried to add the Sortable component in app.ts and ssr.ts like the Inertia Link but it doesn't help 🤔

    1

    Please sign in or sign up for free to reply

    1. tomgobich
      Adocasts Plus Subscriber
      Commented 6 days ago

      Hey memsbdm! Yeah, the deployed app has been expanded beyond the scope of the Building with AdonisJS & Inertia series. It's what I use to plan lessons and series, and also feeds the data shown on our schedule page. So, I've added some things since. Apologies if that caused any confusion!

      I did have the repository private, but just made it public. You can find the code for the live PlotMyCourse app here.

      The <Sortable> component accepts a tag prop, and I have that set as tbody so that it plays well structurally with the table itself. I think that might be all you're missing!

      <Table>
  <TableHeader>
    <TableRow>
      <!-- ... -->
    </TableRow>
  </TableHeader>
  <Sortable
    v-if="courses?.length"
    v-model="courses"
    item-key="id"
    handle=".handle"
    tag="tbody" <!-- 👈 -->
    class="[&_tr:last-child]:border-0"
    @end="onOrderUpdate"
  >
    <template #item="{ element: course }">
      <TableRow class="group">
        <!-- ... -->
      </TableRow>
    </template>
  </Sortable>
</Table>
      
  
      
    
      
      Copied!
      1

      Please sign in or sign up for free to reply

      1. memsbdm
        Adocasts Plus Subscriber
        OP
        Commented 5 days ago

        Thank you so much!! I tried many tags without success but tbody is working perfectly!

        1

        Please sign in or sign up for free to reply

        1. tomgobich
          Adocasts Plus Subscriber
          Commented 4 days ago

          Anytime! Awesome, I'm happy to hear that got things working for you, memsbdm!!

          0

          Please sign in or sign up for free to reply