如何在Kendo网格自定义编辑器中添加Vue组件？

Question

我有一列剑道网格，如：

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

根据Setting Custom Editors，我可以将编辑器重写为textarea，checkbox或dropdown list，例如

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

我的问题是，如果编辑器是Vue组件，例如<qrcode-capture />，该怎么办？

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);
    },
}