Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VueJS Render VNode

tl;dr:

Given a VueJS VNode object, how do I get the HTML element that would be generated if it were rendered?

e.g.:

> temp1
VNode {tag: "h1", data: undefined, children: Array(1), text: undefined, elm: undefined, …}
> temp1.children[0]
VNode {tag: undefined, data: undefined, children: undefined, text: "Test", elm: undefined, …}
> doSomething(temp1)
<h1>Test</h1>

Goal

I'm attempting to build a small VueJS wrapper around the DataTables.net library.

To mimic the behavior of HTML tables in my markup, I want something like the following:

<datatable>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <datatable-row v-for="person in people">
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
            <td>{{ person.salary }}</td>
        </datatable-row>
    </tbody>
</datatable>

What I've done so far

I've started to implement this as follows:

DataTable.vue

<template>
    <table ref="table" class="display table table-striped" cellspacing="0" width="100%">
        <slot></slot>
    </table>
</template>

<script>
/* global $ */
export default {
    data: () => ({
        instance: null
    }),
    mounted() {
        this.instance = $(this.$refs.table).dataTable();
        this.$el.addEventListener("dt.row_added", function(e) {
            this.addRow(e.detail);
        });
    },
    methods: {
        addRow(row) {
            // TODO <-----
            console.log(row);
        }
    }
};
</script>

DataTableRow.vue

<script>
/* global CustomEvent */
export default {
    mounted() {
        this.$nextTick(() => {
            this.$el.dispatchEvent(new CustomEvent("dt.row_added", {
                bubbles: true,
                detail: this.$slots.default.filter(col => col.tag === "td")
            }));
        });
    },
    render() { return ""; }
};

What this currently does:

  • When the page loads, the DataTable is initialized. So the column headers are properly formatted and I see "Showing 0 to 0 of 0 entries" in the bottom left
  • The CustomEvent is able to bubble up past the <tbody> and be caught by the DataTable element successfully (circumventing the limitation in VueJS that you can't listen to events on slots)

What this does not do:

  • Actually add the row

My event is giving me an array of VNode objects. There's one VNode per column in my row. The DataTables API has an addRow function which can be called like so:

this.instance.row.add(["col1", "col2", "col3"]);

In my case, I want the resultant element from the rendering of the VNode to be the elements in this array.

var elems = [];
for (var i = 0; i < row.length; i++)
    elems[i] = compile(row[i]);
this.instance.row.add(elems);

Unfortunately this compile method eludes me. I tried skimming the VueJS documentation and I tried Googling it, but no dice. I tried manually passing the createElement function (the parameter passed to the render method) but this threw an error. How can I ask VueJS to render a VNode without injecting the result into the DOM?

like image 939
stevendesu Avatar asked May 27 '18 20:05

stevendesu


People also ask

What is VNode Vue?

A VNode is an "element" in Vue's Virtual DOM, which is what Vue uses to create the real HTML DOM that's rendered on the page.

Should you use JSX with Vue?

js. Love it or hate it, JSX is a popular extension to JavaScript that allows XML tokens in your scripts. If you want to create templates in your script files and you find Vue's render() function to be difficult to work with, JSX may be just what you need.

How do I refresh my Vue component?

The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.

Does Vuejs use virtual DOM?

Render Functions. Vue templates are compiled into virtual DOM render functions.


1 Answers

I ran into the same issue wanting to do basically the same thing with a row details template for DataTables.net.

One solution could be to create a generic component that renders out a VNode and instantiate that programmatically. Here is how my setup for a dynamic detail row that I insert using datatable's row.child() API.

RenderNode.js

export default {
    props: ['node'],
    render(h, context) {
        return this.node ? this.node : ''
    }
}

Datatables.vue

Include the renderer component from above

import Vue from 'vue'
import nodeRenderer from './RenderNode'

Instantiate and mount the renderer to get the compiled HTML

// Assume we have `myVNode` and want its compiled HTML

const DetailConstructor = Vue.extend(nodeRenderer)

const detailRenderer = new DetailConstructor({
    propsData: {
        node: myVNode
    }
})

detailRenderer.$mount()    
// detailRenderer.$el is now a compiled DOM element 
row.child(detailRenderer.$el).show() 
like image 69
davidmdem Avatar answered Sep 23 '22 00:09

davidmdem