[Vuejs]-Accessing element within a component

by

1👍

As stated in the vue.js documentation this.$children returns an array of children components. You could see your child component by printing this.$children[0] and its root element by priting this.$children[0].$el.

If you have many children components and want to target a specific one, you can tag your component with a ref attribute like below :

<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>
👤Murat

Leave a comment