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

Question

You can customize the JqxScheduler's edit dialog by appending the existing containers in the editDialogCreate method like this:

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

I understand that this HTML inside won't be rendered in my Vue file, but I cannot add the rendered this rendered version by copy-paste as far as I know:

<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>

My question is: How can I render this HTML and add it to the dialog? I am using webpack and vue-router.

PS: I have read about the Vue.Compile method, but if I am correct, I cannot use it here.

Answer 1

You have several options:

1. Iclude this code into your html markup and put v-if directive on it, to hide/show it if necessary: v-if docs
2. Also you can try to create separate component for your title selector with Vue.component('component-title', {...}), docs