quill error with Invalid Quill Container on Vuejs when used with vuetify tab

Question

Error on plugin quill occurred when i placed the editor in a tab container of Vuetify. It is created under the mounted hook.

The error in Console is

quill Invalid Quill container undefined

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'on' of undefined"

Below is the vue file.

<template>
  <v-app class="panel" ref="panel">
    <v-tabs fixed-tabs v-model="tab">
      <v-tabs-slider></v-tabs-slider>
      <v-tab key="1" href="#tab1">
        Tab 1
      </v-tab>
      <v-tab key="2" href="#tab2">
        Tab 2
      </v-tab>
      <v-tabs-items v-model="tab">
        <v-tab-item key="1" value="tab1">
          <div class="formPanel" ref="formPanel">
            <div class="title-text" ref="title">Edit text in tab 1</div>
            <div ref="editor" v-html="value"></div>
          </div>
        </v-tab-item>
        <v-tab-item key="2" value="tab2">
          <v-card-text>This is tab 2</v-card-text>
        </v-tab-item>
      </v-tabs-items>
    </v-tabs>
  </v-app>
</template>

<script>
import Quill from 'quill';

export default {
  data: function () {
    return {
      tab: 'editor'
    };
  },

  mounted() {
    var toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'size': ['small', false, 'large', 'huge'] }],
    ];

    this.editor = new Quill(this.$refs.editor, {
      modules: { toolbar: toolbarOptions },
      placeholder: 'Edit text',
      theme: 'snow'
    });

  },
};
</script>

<style scoped>

</style>

Answer 1

this is probably due to the fact that

<div ref="editor" v-html="value"></div> is inside a child component's slot v-tab-item which is conditionally rendered.

that means that the v-tab-item is mounted AFTER the parent's mounted() executes, so the content (including your refs) are not available.

If you can defer the initialization until the child has mounted then you can access the ref, but getting that to work is a complex endeavor.

Instead, I would opt to define a component that handles quill initialization and that can be nested in the tab.

ie:

<v-tab-item key="1" value="tab1">
    <MyQuillComponent v-model="value"/>
</v-tab-item>