В Vue.js как я могу узнать, что весь вид отрисован, включая вызовы AJAX?

Question

Согласно документации Vue.js API, используя nextTick() внутри mounted() будет гарантировать, что весь вид был представлен, но я не уверен, что они имеют в виду под "визуализированным" в этом случае.

Я пытаюсь интегрировать intro.js библиотеку intu Vj.js, но если я использую положить introJs().start() Внутри nextTick как следующее:

mounted: function () {
  this.$nextTick(function () {
    // Code that supposedly will run only after the
    // entire view has been rendered
       introJs().start()
  })
}

кажется, что DOM все еще не полностью готов, и introJs не в состоянии успешно показать все шаги вступления.

Ссылка на воспроизведение

Как я могу знать, что все действительно готово? Есть ли другой способ запустить introJs в Vue.js?

Answer 1

Проблема в том, что вы используете v-if, Если условие ложно, элемент html не будет в документе, что означает, что introjs не может его найти. В инструментах разработчика браузера, если вы посмотрите на компонент, когда v-if условие ложно, вы бы увидели HTML-комментарий, <!-- -->,

Простое решение заключается в использовании v-show, Таким образом, элемент будет в документе, introjs может его найти, а пользователь все равно его не увидит, потому что v-show переключает display собственность css.