Блог

Главная - Вопросы по программированию - Vue js, не удается прочитать свойство $el

Vue js, не удается прочитать свойство $el

#vuejs2 #vue-component

#vuejs2 #vue-компонент

Вопрос:

У меня проблема с правильно понятыми элементами потока, вызывающими метод в 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()

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

Комментарии:

1. можете ли вы попробовать буферизацию var that = this; и использовать that внутри обратного вызова ответа?

2. mounted() { var that = this; axios.get("http://localhost:3000/api/test").then(response => { this.testData= response.data that.renderHomePageMethod(); }); } Та же ошибка.

3. можете ли вы опубликовать свой renderHomePageMethod() ? Или, если вы не можете, можете ли вы написать if(!this.$el) return; в первой строке этого метода?

4. Спасибо за вашу помощь. После добавления в первой строке та же ошибка. Метод таков: ` renderHomePageMethod() { const width= this.$refs.compTest.$el.getBoundingClientRect(); const x = (window.innerWidth — width) / 5; this.$refs.svg.zoom.transform.x = x; }`

5. Хорошо, ваш ссылочный компонент не готов, когда компонент смонтирован. Попробуйте выдать событие, когда указанный компонент был смонтирован, затем запустите метод renderHomePageMethod внутри этого обработчика событий.

Ответ №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)
}