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

【问题标题】：How can I add vue-select to JqxScheduler's dialog?如何将 vue-select 添加到 JqxScheduler 的对话框中？
【发布时间】：2020-11-29 02:28:25
【问题描述】：

您可以通过在 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方法我已经看过了，但是如果我是正确的，我不能在这里使用它。

【问题讨论】：

标签： html jquery vue.js render jqxwidgets

【解决方案1】：

您有多种选择：

将此代码添加到您的 html 标记中并在其上添加 v-if 指令，以便在必要时隐藏/显示它：v-if docs
您也可以尝试使用 Vue.component('component-title', {...}), docs 为标题选择器创建单独的组件

【讨论】：

谢谢。您的第一个想法工作得很好，现在我只是弄清楚当我将其父 div v-if 设置为 false 时如何处理条件渲染，我想将它保留在我的对话框中。
我猜你唯一的选择是提取需要从父容器中显示的 div。如果父容器 v-if 设置为 false，则无法在其中显示某些内容，因为它只是不呈现任何内容