Как дождаться получения данных из вызывающего компонента?

Question

[Андрей]

Добрый. NUXT.
Есть 2 компонента. Один вызывается из другого с данными ( PROMISE ). Вызываемый компонент инициализирует Плагин, который жрет данные только при инициализации ( mount ). Но при инициализации данных еще нет ибо данные еще не дошли по цепочке от АПИ.
Вышел из проблемы создав computed с проверкой через Object.assign и дальнейшей инициализацией. Но мне такой подход не нравится. Если у кого есть какие либо идеи или ссылки - очень прошу поделиться.

Comments

[Aetae]

Базовое решение для компонента которому нужны данные, а их ещё нет - не рисовать компонент пока их нет(v-if).

Для иного ответа нужно больше деталей и пример.

[Андрей]

В общем Это вызов так называемого editor.js ( editorjs.io ).
Инициализация класса проходит нормально без ошибок, а вот Импорт данных после инициализации вызывает непонятные ошибки. Причем документация есть.

/plugins/editorjs.js

import editorJS from '@editorjs/editorjs';
import editorHeader from '@editorjs/header';

export default ( context, inject ) => {
  
  const defaultOptions = {
    id: '',
    data: {},
    onChange: () => {},
  }

  const editor = ( options = defaultOptions ) => {

    return new editorJS( {
      placeholder: 'Писать тут !',
      holder: options.id,
      tools: {
        header: editorHeader,
      },
      data: options.data || {},
      
      onChange( data ) {
        // pass in function from component to run on change
        options.onChange( data )
      }
    } )
  };

  inject( 'editor', options => editor( options ) );
}

/pages/index.vue

...
  <editorjs :content="post.data" /> 
...
async mount() {
  await this.$store.dispatch( 'posts/editPost' )
  this.post = this.$store.state.posts.post
}
...

/componrnts/editorjs.vue

...
  <div id="editorjs" class="editorjs" />
...
mounted() {
  const editorOptions = {
    id: 'editorjs',
    data: this.content || {},
    onChange: this.onChange
  };
  this.editor = this.$editor( editorOptions );
}

По документации у EDITORJS есть функция RENDER которая по идее должна принять данные и отрисовать их в редакторе после инициализации. Но у меня лезет ошибка что такой функции не существует.

Сейчас реализовано вот таким идиотским способом, который мне совершенно не нравится:

<template>
  <div>
    <div id="editorjs" class="editorjs" />
    {{ editorData }}
  </div>  
</template>
...
  computed: {
    editorData() {
      if ( Object.assign( {}, this.content ) ) {
        if ( !this.dataLoaded && this.content ) {
          const editorOptions = {
            id: 'editorjs',
            data: Object.assign( {}, this.content ) || {},
            onChange: this.onChange
          };
          this.editor = this.$editor( editorOptions );
          this.dataLoaded = true // семафор получения данных
        }
      }
      return null    
    }
  },
...

Единственное что еще остается - это пойграться с версиями из npm.

[Дмитрий Беляев]

async mount()

Андрей, https://www.youtube.com/watch?v=zSHGaQvp9pI

[Андрей]

Дмитрий Беляев, Ай Спасибо, Добрый человек