Vue js，无法读取属性$el

Question

我在正确理解流元素、vue js 中的方法调用方面遇到了问题。这是标准的想法 - 从 rest 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)
}