Add vuejs component into column renderer.

kingquattro

Hi, I don't have a link to show you the example but will try my best to provide all details.

In short I need to add VueJS component into a Datatables column.

here is my datatables setup

dt = $('#library_datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 50,
                responsive: true,
                lengthMenu: [[10, 50, 100, 500, 1000, 5000], [10, 50, 100, 500, 1000, 5000]],
                ajax: {
                    'url': "{{ url('library_q') }}",
                    'data': function(data) {
                        // Append to data
                        data.filters = filter_by;
                    }
                },
                columns: [
                    {
                        // first column to sticky mark a row
                        "class": "details-control",
                        "orderable": false,
                        "data": null,
                        "searchable": false,
                        "defaultContent": "",
                        "render": () => {
                            return '<i class="fas fa-chevron-right rotate"></i>';
                        },
                    },
                    {
                        "data": "library_name",
                        "render": function(data, type, row, meta) {
                            return renderLibraryInfoColumn(data, row)
                        }
                    },
                    {
                        "data": "project",
                        "render": function(data, type, row, meta) {
                            return renderProjectColumn(data, row)
                        }
                    },
                    {
                        "data": "fxn_cnt",
                        "searchable": false,
                        "render": function(data, type, row, meta) {
                            return renderViromeCategoriesChart(meta)
                        }
                    },
                    {
                        "data": "complete_cnt",
                        "searchable": false,
                        "render": function(data, type, row, meta) {
                            return renderOrfTypeChart(meta)
                        }
                    },
                    {
                        "data": "lineage",
                        "searchable": false,
                        "render": function (data, type, row, meta) {
                            return renderTaxonomyChart(meta)
                        }
                    }
                ],

As you see each column utilizes a render function to populate the column. This part works exactly as need it to.

Next I want to add a checkbox in the "library_name" column which utilizes "renderLibraryInfoColumn" function. I would like to use VueJS component to add the checkbox so as to contain all the supporting functionality the checkbox.

I added the VueJS component but it doesn't work as expected. The table loads but its empty, all the data is there (because number of pages are calculated based on the rows received from the server) but the table is empty. If I comment

new Vue({ el: '#library_datatable' })

then table loads as before but as expected VueJS component is not renedered because HTML doesn't know what to do with <add-to-cart> tag.

I suspect this is not working as I would like is because VueJs is attached to the library_datatable element which used by datables dt = $('#library_datatable').DataTable({ ... }) and also by VueJS.

I have attached VueJS to the root main content div but that does the same. No data displayed when "new Vue ({...})" is active.

Has anyone else tried to do something similar and/or is there a way to add vuejs component into a Dataatables column using column renderer.

My script block looks as follows

 <script>
     $(document).ready(function() {
           ....
            ...
            dt = .....

            function renderLibraryInfoColumn(data, row) {
               str = `<div><add-to-cart id="${row.id}" value="${row.value}" @reset="reset"><add-to-cart>
                 <p><strong>${row.library_name.trim()</strong></p>
                 ... 
                </div>`
            }

           new Vue ({ el: '#maincontent' })
      }
<script>

Thank you

allan

Hi,

I don't think is going to work I'm afraid. Who have two different libraries trying to control the same DOM elements, and that isn't going to end well. In my own use of Vue I've never used a component inside a cell. It might be possible using the v-once option, but I think as soon as you start doing anything to update the table using the DataTables API the wheels are going to come off.

Sorry I don't have better news!

Are you able to rework add-to-cart to be just an HTML string with an event handler rather than a Vue component?

Allan