Добавление и визуализация компонента Vue с использованием js - PullRequest
Новая
       8

Добавление и визуализация компонента Vue с использованием js

0 голосов
/ 19 декабря 2018

У меня есть компонент Vue, который импортируется внутри файла компонента.Я пытаюсь визуализировать компонент, который был импортирован с использованием функции append.Как я могу это сделать? 

<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>

1 Ответ

0 голосов
/ 19 декабря 2018

Моей первой реакцией было «вы не должны напрямую манипулировать DOM или создавать HTML-строки» (или иначе, почему вы используете Vue?), Но вы используете JqxGrid, который, кажется, функционирует таким образом (я незнакомы с JqxGrid).

В любом случае, то, что вы пытаетесь визуализировать, не является строго HTML, это строка шаблона Vue, которая требует компиляции в функцию рендеринга JavaScript (см. Vue.compile()).И даже если вам удастся это сделать, я не уверен, что он будет работать с JqxGrid.

Это то, что действительно должно быть сделано JqxGrid с использованием слотов в области действия .Если JqxGrid не может поддерживать рендеринг таких компонентов Vue, то, боюсь, вам не повезло.

...