vue.js - 在 Vue 中完成渲染后如何调用方法？

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'
      });
    }
  }
}

我的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钩子(Hook)。

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