Как добавить компонент vue в пользовательский редактор сетки кендо?

Question

У меня есть столбец сетки кендо, например:

<kendo-grid-column
    :field="'qrcode'"
    :title="'qrcode'"
    :width="200"
    :editor="qrcodeEditor"
></kendo-grid-column>

В соответствии с Настройка пользовательских редакторов , я могу переписать редактор на textarea, checkbox или dropdown list, например

textareaEditor: function(container, options) {
    $('<textarea data-bind="value: ' +
            options.field +
            '" cols="20" rows="4"></textarea>'
    ).appendTo(container);
},

Моя проблема в том, что если редактор является компонентом vue, например

Answer 1

Я нашел решение:

methods:{
    qrcodeEditor: function(container, options) {
        // An <input> element is required for binding data
        let input = $(`<input data-bind="value:${options.field}" class="k-textbox width-50"/>`);
        input.appendTo(container);

        // use Vue.extend to make a component constructor, and new a component
        let qrcodeCapture = new (Vue.extend(QrcodeCapture))();
        qrcodeCapture.$on("decode", decodedString => {
            input.val(decodedString).trigger("change");
            // Trigger "change" element to tell kendo that you have change the data
        });
        qrcodeCapture.$mount();
        container.append(qrcodeCapture.$el);
    },
}