Доступ к элементу внутри компонента

Question

Я пытаюсь получить доступ к корневому элементу компонента с помощью this.$children.$el, однако в консоли я получаю неопределенное значение. Я могу видеть свойство $el на объекте, когда я console.log(this.$children), поэтому я не совсем уверен, где я иду не так, любая помощь будет принята с благодарностью.

<template>
    <div>
        <Project
            v-for="project in projects"
            :key="project.sys.id"
            :title="project.fields.title"
            :images="project.fields.images"
        />
    </div>
</template>

<script>
import Project from '~/components/Project'

export default {
    mounted() {    
        const projects = this.$children.$el
    },
    components: {
        Project
    }
}
</script>

Answer 1

Как указано в документации vue.js this.$children возвращает массив дочерних компонентов. Вы можете увидеть ваш дочерний компонент, напечатав this.$children[0], а его корневой элемент, напечатав this.$children[0].$el.

Если у вас много дочерних компонентов и вы хотите нацелиться на определенный, вы можете пометить свой компонент с помощью ref атрибут, как показано ниже:

<template>
    <div>
        <Project
            v-for="project in projects"
            :key="project.sys.id"
            :title="project.fields.title"
            :images="project.fields.images"
            ref="project"
        />
    </div>
</template>

<script>
import Project from '~/components/Project'

export default {
    mounted() {    
        console.log(this.$refs.project)
    },
    components: {
        Project
    }
}
</script>