与 vuetify 选项卡一起使用时，Vuejs 上的 Invalid Quill Container 出现 quill 错误

Question

当我将编辑器放在 Vuetify 的选项卡容器中时，插件 quill 发生错误。它是在 mounted 钩子下创建的。

控制台中的错误是

quill Invalid Quill container undefined

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

下面是vue文件。

<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

这可能是因为

<div ref="editor" v-html="value"></div> 位于子组件的插槽 v-tab-item 内，有条件地呈现。

这意味着 v-tab-item 在父 mounted() 执行后挂载，因此内容（包括您的引用）不可用。

如果您可以将初始化推迟到子项挂载之后，您就可以访问 ref，但要使其正常工作是一项复杂的工作。

相反，我会选择定义一个组件来处理 quill 初始化并且可以嵌套在选项卡中。

即：

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

与 vuetify 选项卡一起使用时，Vuejs 上的 Invalid Quill Container 出现 quill 错误

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

vue.js

vuejs2

vuetify.js

quill

vuetify-tabs