Use SortableJS/Vue.Draggable with Laravel Livewire

Question

I’m building a Livewire component for a table. I want the rows to be sortable, so I’m trying to implement VueDraggable inside my Livewire component.

On my LivewireTable component, I define one public property called $records.

On the view, I’m using vue-draggable like so:

<vue-draggable wire:model="records" tag="tbody">
    @foreach($records as $record)
        <tr>
            (...)
        </tr>
    @endforeach
</vue-draggable>

When I inspect the Vue component the value is null, which means Livewire is not doing what it‘s supposed to.

I’m sure I’m doing something wrong. Can anyone help? Thanks in advance.

Answer 1

The Vue JS support was abstracted out in a separate package. You can find it at https://github.com/livewire/vue