Appending and render a Vue component using js

Question

I have a Vue component which is imported inside of a component file. What I am trying to do is, I want to render a component which was imported using the append function. How can I do that?

<template>
    <JqxGrid :width="width" :source="dataAdapter" :columns="gridValues"
             :pageable="true" :autoheight="true" :sortable="true"
             :altrows="true" :enabletooltip="true" :editable="true"
             :selectionmode="'multiplecellsadvanced'"  :showtoolbar="true" :rendertoolbar="rendertoolbar">
    </JqxGrid>
</template>

<script>

    import JqxGrid from "../jqx-vue/vue_jqxgrid.vue";
    import Button from "./buttonComponent.vue";

    methods: {
        rendertoolbar: function (toolbar) {
        // this is where I am trying to add the other component but it is not rendering as a actual component, it is just spitting out as it is.
            toolbar.append($("<span style='margin: 5px;'>  <jqx-button class='custom-erp-button custom-btn-secondary' :button-name="+`Add`+"></jqx-button>  </span>"));
        },
        cellsrenderer: function (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
            if (value < 20) {
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
            }
            else {
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
            }
        }
    }
</script>

<style>
</style>

Answer 1

My first reaction was "you shouldn't be directly manipulating the DOM or constructing HTML strings" (or else why are you using Vue?), but you're using JqxGrid which appears to function this way (I'm not familiar with JqxGrid).

In any case, what you're trying to render isn't strictly HTML, it's a Vue template string which requires compilation to a JavaScript render function (see Vue.compile() ). And even if you do manage to do that, I'm not sure it'll work with JqxGrid.

This is something that really should be done by JqxGrid by using scoped slots . If JqxGrid cannot support rendering Vue components like this, then I'm afraid you're out of luck.