Laravel-datatables: Run VueJS component in column

[weijinnx]

Summary of problem or feature request

Hey! I added action column to datatable and have a vue component for one of actions. But component doesn't compile, just have html tag, but not a component view.

Code snippet of problem

/**
     * Load data for datatable
     *
     * @param string $name
     * @return mixed
     */
    public function loadData(string $name = 'datatable')
    {
        $self = $this;
        return DataTables::of(static::getData($name))
            ->addColumn('action', function ($model) use ($self) {
                return view('admin._system._partials.datatable.actions', [
                    'model' => $model,
                    'resource' => $self
                ]);
            });
    }

VIEW (actions.blade.php):

<div class="text-center">
    <a href="{{ $resource->getRouteByType('show', $model->id) }}" class="mr-2">
        <i class="fa fa-eye"></i>
    </a>
    <a href="{{ $resource->getRouteByType('edit', $model->id) }}" class="mr-1">
        <i class="fa fa-edit"></i>
    </a>
    <datatable-delete-modal
            action="{{ $resource->getRouteByType('destroy', $model->id) }}"
            title="{{ $resource->getTitle() }}"
            trashed="{{ $model->trashed() }}"
            model="{{ $model->toJson() }}"
    ></datatable-delete-modal>
</div>

System details

• Operating System - MacOS
• PHP Version - 7.1
• Laravel Version - 5.5
• Laravel-Datatables Version 8.0

[weijinnx]

RESOLVED!

When you init Datatables, use initComplete and init Vue again:

<script>
    $(function () {
        window['dt'] = $('#data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('admin::resource.data', $resource->getName()) !!}',
            columns: {!! $resource->getColumns() !!},
            initComplete: (settings, json) => {
                new window.Vue({
                    el: '#app'
                });
            }
        });
    });
</script>

[weijinnx]

Vue component works, but datatables - doesn't

[yajra]

TBH, I haven't tried integrating view events with DT and just fallback to jQuery codes :). Will try this when I got the chance. Keep us posted if you have some progress. Thanks!

[yajra]

I tried to play with my custom vue data-table script again. Try using the gist I created as a ref.

[ghost]

@weijinnx Did you find a workaround for this? I am facing the same issue..

[ghost]

@yajra I have used your custom vue data-table.But the issue still exist.. the component doesn't get compiled! It has to do with ( addColumn functionality I guess ).

[yajra]

@Rux77 I updated the gist and added an example for DeleteButton.vue which is a component added on runtime. Credits to @ChaosPower for helping me on this :).

BTW, action buttons should be compiled/build on the client-side and not the value returned from the server-side. If you find a way to make it work from the server, please share 👍

[swastik009]

@yajra Thank you so much for this solution. It worked like a charm.