Vuejs и DataTables связываются в render () - PullRequest
0 голосов
/ 04 июля 2019

В DataTables я добавляю render() в columnDefs, чтобы разрешить пользовательский html в очень простой привязке. Я хочу добавить синтаксис vue в функцию рендеринга и сделать так, чтобы datatables бросал этот блок в каждую строку. Примерно так:

new Vue({
    el: "#app",
    components: {"data-tables": datatables},
    data: {
        message:"hi",
        tableData: [...]
        columnDefs: [{
            title: "Actions", width: "20%", data: null,
            render: (data: any, type: string, row: any, meta: object) => {
                return `<div class="row hcenter">
                          <a title="Edit" class="btn btn-default" type="button">
                            <i class="fa fa-edit"></i>{{message}}
                          </a>
                        </div>`}
        }]
     }
})

и шаблон:

{
    template: '<table v-bind:id="tableId"></table>',
    props: ["tableData", "columnDefs", "options", "tableId"],
    data() {
        return { dtHandle: null }
    },
    watch: {
        tableData(val, oldVal) {
            ...
        }
    },
    mounted() {
        this.$nextTick(() => {
            // Other things
            ...

            // Create datatable and save
            this.dtHandle = $(this.$el).DataTable(options);
            // Probably something here to bind anything new <<<<<<<<<<<<<<<<<<<<<<
        });
    }
}

Исходя из мира нокаутов, я бы сделал следующее, чтобы применить привязки по требованию:

ko.cleanNode(element);
ko.applyBindings(context, element);

Есть ли что-то подобное в Vuejs, которое позволило бы мне выбросить произвольный HTML-код на страницу и связать Vue с текущей моделью?

Кроме того, есть ли другой способ сделать это или что-то подобное? Я пытаюсь сделать компонент datatables как можно более простым и универсальным, поэтому я действительно хочу передавать все, что могу, со страницы, содержащей его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...