Vue JS, не может прочитать свойство $ el

Question

У меня проблема с правильно понятыми элементами потока, вызов метода в vue js.Это стандартная идея - извлечь некоторые данные из остальных API и отобразить их в браузере.

Метод получения, который я написал в mounted().Также я добавил туда звонок renderHomePageMethod().Этот метод был написан в methods:

 mounted() {
    axios.get("http://localhost:3000/api/test").then(response => {
      this.testData= response.data
      this.renderHomePageMethod();
    });
  }

В renderHomePageMethod() Я использовал this.refs$ и $el.И, возможно, проблема в том, что все работает нормально, но в браузере я получил предупреждение о:

Uncaught (in promise) TypeError: Cannot read property '$el' of undefined

Возможно, мне следует позвонить

this.renderHomePageMethod()

в другом месте.Но где?

Answer 1

Кажется, что указанный вами компонент не визуализируется до того, как рендерит основной компонент, поэтому он выдает ошибку ссылки.

Хакерский путь был бы примерно таким:

mounted() {
    axios.get("http://localhost:3000/api/test").then(response => {
        this.testData= response.data
        setTimeout(() => {
            this.renderHomePageMethod();
        }, 1000); // or any other minimum delay before the subcomponent is rendered
    });
}

или лучше и сложнее, создайте файл event-bus.js, который содержит:

import Vue from 'vue';
export const EventBus = new Vue();

в вашем основном и вспомогательном компонентах:

import { EventBus } from "./event-bus.js";

в вашем подкомпоненте, это отправит уведомление основному компоненту, когда он будет готов к развертыванию:

mounted(){
    EventBus.$emit("subcomponent:is-mounted");
}

в вашем основном компоненте:

data(){
    return {
       testData: null
    }
},
mounted(){
   axios.get("http://localhost:3000/api/test").then(response => {
       this.testData= response.data
   });
   EventBus.$on("subcomponent:is-mounted", () =>{
       this.renderHomePageMethod();
   });
},
beforeDestroy(){
   EventBus.$off("subcomponent:is-mounted");
   // don't forget to remove the listeners because of duplicate listeners may occur 
   // if your component refreshes (remounts)
}