0

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

控制台中的错误是

quill 无效的 Quill 容器未定义

[Vue 警告]：挂载钩子中的错误：“TypeError：无法读取未定义的属性‘on’”

下面是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>

4

1 回答 1

0

这可能是因为

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

这意味着v-tab-item在父级mounted()执行之后安装，因此内容（包括您的参考）不可用。

如果您可以将初始化推迟到孩子挂载之后，那么您可以访问 ref，但要让它工作是一项复杂的工作。

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

IE：

<v-tab-item key="1" value="tab1">
    <MyQuillComponent v-model="value"/>
</v-tab-item>
于 2020-06-24T17:16:19.333 回答