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

Question

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

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

我的tab基本是这样的：

<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>

目前，我收到一个错误，因为当我调用 new Quill(...) 时 #editor 元素尚不存在。我如何延迟页面上的 QuillJS 初始化，以便在 #editor 已经存在之前不会发生？

Answer 1

使用 mounted 钩子。

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

Answer 2

使用 this.$nextTick() 将回调推迟到下一个 DOM 更新周期后执行（例如，在更改导致 render-update 的数据属性之后）。

例如，您可以这样做：

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

Answer 3

一个干净的方法是不依赖选择器，而是让 Quill 编辑器成为一个 self-contained 组件：

<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 中完成渲染后如何调用方法？

How you do you call a method once rendering is done in Vue?

vue.js

vuejs2

quill