[Vuejs]-Quill error with Invalid Quill Container on Vuejs when used with vuetify tab

0👍

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>

Leave a comment