Как вызвать метод для компонента vue после его рендеринга в сборнике рассказов?

Question

Моя проблема состояла в том, чтобы вызвать метод после , который компонент отобразил в сборнике рассказов. Речь идет о показе модального объекта, но его можно применить к любому vue компоненту.
Мне нужно здесь вызвать метод showDialog(true) после создания компонента, чтобы сделать его видимым.

Answer 1

Вот хитрое решение, использующее Typescript с компонентным форматом истории сборника рассказов (версия 5.2 +) :

import Vue from 'vue';

// ... some imports and global setup 

export const normalError = () => ({
  components: { 'error-modal': ErrorModal },
  template: `<error-modal @hook:mounted='externalMount'/>`, // bind the custom method on mounted hook
  methods: {                           // bind the new method to the component
    async externalMount() {            // don't use an arrow function or this will have wrong scope
      const anyThis: any = this;
      const vm = anyThis.$children[0]; // target the component ErrorModal
      await Vue.nextTick();            // wait that mounted() finished
      vm.showDialog(true);             // finally show the modal / call the method !
    }
  }
});

Если вы найдете лучший вариант, я был бы рад знать и высказывать это.