Question

我正在构建一个Vue应用程序，该应用程序的选项卡中包含QuillJS编辑器。我有一个简单的setTab(tabName) Vue方法，该方法使用v-if指令显示/隐藏选项卡。

methods: {
  setTab: function (tabName) {
    this.view = tabName;
    if(tabName === 'compose') {
      var editor = new Quill('#editor', {
        modules: { toolbar: '#toolbar' },
        theme: 'snow'
      });
    }
  }
}

我的标签基本上是这样的：

<div id="composer" v-if="tabName === 'compose'">
  <!-- toolbar container -->
  <div id="toolbar">
    <button class="ql-bold">Bold</button>
    <button class="ql-italic">Italic</button>
  </div>
  <!-- editor container -->
  <div id="editor">
    <p>Hello World!</p>
  </div>
</div>

当前，我收到一个错误消息，因为调用#editor时new Quill(...)元素尚不存在。我该如何在页面上延迟QuillJS初始化，以便直到#editor已经存在之后才进行初始化？

Answer 1

使用this.$nextTick()推迟在下一个DOM更新周期（例如，在更改导致渲染更新的data属性之后）之后执行的回调。

例如，您可以执行以下操作：

methods: {
  setTab: function (tabName) {
    this.view = tabName;
    if(tabName === 'compose') {
      this.$nextTick(() => {
        var editor = new Quill('#editor', {
          modules: { toolbar: '#toolbar' },
          theme: 'snow'
        });
      })
    }
  }
}

Answer 2

使用mounted钩子。

mounted: function () {
  // Code that will run only after the
  // entire view has been rendered
}

Answer 3

一种干净的方法不是依靠选择器，而是使Quill编辑器成为一个独立的组件：

<template>
    <div class="quill-editor">
      <!-- toolbar container -->
      <div ref="toolbar">
        <button class="ql-bold">Bold</button>
        <button class="ql-italic">Italic</button>
      </div>
      <!-- editor container -->
      <div ref="editor">
        <p>Hello World!</p>
      </div>
    </div>
</template>

<script>
  ...
  name: "QuillEditor",
  mounted() {
    this.quill = new Quill(this.$refs.editor, {
      modules: { toolbar: this.$refs.toolbar },
      theme: 'snow'
    });
  }
  ...
</script>

在Vue中完成渲染后，如何调用方法？

3 个答案: