Метод запуска после рендеринга дочернего компонента

Я использую v-if в своем родителе для условного рендеринга дочернего компонента. Даже когда дочерний элемент не должен отображать смонтированную функцию, она все равно выполняется и приводит к ошибке в консоли.

Как убедиться, что дочерний компонент отображается при запуске метода, когда дочерний компонент отображается.

В моем случае я использую автофокус:

mounted: function () {
        // Autofocus input on load.
        this.$nextTick(() => this.$refs.input.focus());
    },

Error in nextTick: "TypeError: _this.$refs.input is undefined"

console.info(this.$refs.input) дает объект:

<input class = "form-control" data-v-661f7e55 = "" type = "text" autocomplete = "off">

javascript vue.js lifecycle

15.02.2019 17:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Попробуй это.

<input class = "form-control" ref = "input" type = "text" autocomplete = "off">

mounted(){
      this.$nextTick(() => this.$refs.input.focus())
    }

Это отлично работает для меня. ref используется для регистрации ссылки на элемент или дочерний компонент.

Проблема в том, что смонтированный все еще получает выполненное событие, когда дочерний компонент находится в v-if = "false". И эта строка кода должна выполняться после того, как дочерний элемент будет отображен на экране.

— 18.02.2019 17:14

так что это смонтировано в дочернем компоненте или в родительском компоненте?

— 19.02.2019 10:10

Это в дочернем компоненте.

— 20.02.2019 12:12

15.02.2019 17:07