Как вы вызываете метод после рендеринга в 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'
      });
    }
  }
}

Моя вкладка в основном выглядит следующим образом:

<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 (например, после изменения свойства данных, которое вызывает обновление рендеринга).

Например, вы могли бы сделать это:

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

Answer 2

Простой способ сделать это - не полагаться на селекторы, а сделать редактор 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>

Answer 3

Используйте установленный крюк.

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