如何将 vue-select 添加到 JqxScheduler 的对话框中？

Question

您可以通过在 editDialogCreate 方法中附加现有容器来自定义 JqxScheduler 的编辑对话框，如下所示：

var titleSelector = $(`
    <div>
      <div class='jqx-scheduler-edit-dialog-label'>Előadás</div>
      <div class="jqx-scheduler-edit-dialog-field">
        <div><v-select :options="options"></v-select></div>
      </div>
    </div>`);
fields.subjectContainer.append(titleSelector);

我知道里面的这个 HTML 不会在我的 Vue 文件中渲染，但据我所知，我无法通过复制粘贴添加渲染的这个渲染版本：

<div data-v-0a61aa6a="" dir="auto" class="v-select vs--single vs--searchable"> 
  <div id="vs1__combobox" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria- 
    label="Search for option" class="vs__dropdown-toggle"><div class="vs__selected-options">
    ...
  </div>  
</div>

我的问题是：如何渲染这个 HTML 并将其添加到对话框中？我正在使用 webpack 和 vue-router。

PS: 我已经阅读了 Vue.Compile 方法，但如果我是正确的，我不能在这里使用它。

Answer 1

您有多种选择：

我将此代码包含到您的 html 标记中，并在其上放置 v-if 指令，如有必要，将其放置在 hide/show 中：v-if docs
您也可以尝试使用 Vue.component('component-title', {...}), docs

如何将 vue-select 添加到 JqxScheduler 的对话框中？

How can I add vue-select to JqxScheduler's dialog?

html

jquery

render

jqxwidgets

vue.js