DEV Community

Cover image for How to get the "name" of a Component when looping through Components
Mark Abeto
Mark Abeto

Posted on • Updated on

How to get the "name" of a Component when looping through Components

Hi Good afternoon Guys πŸ˜„.

Basically, I had a problem today getting the name of a component so I can use that name as a dynamic prop title in a span tag. So when I hover on that span I can see the name of that component.

A Sample SVG component.
SVG Comp

The Project.vue file.
Project.vue

The CardProject.vue file.
CardProject.vue

I wanna have a span tag above the component tag with a title property.

Maybe we can change our projectTechs array to look like this.
Yuck

Using this would change our code in the v-for directive code and it adds a lot of code and it makes our code ugly. I didn't use this approach. So I tried googling the solution for this and I found to get the name of the component you have to use this this.$options.name. I tried using it.

dumb move

And it threw an error.

  vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'name' of undefined
Enter fullscreen mode Exit fullscreen mode

What does this mean is that there is no $options property in the tech object.

So I tried logging the technologies array in the console.
And I found out there is a name property in each of the components in the array that you can access directly.

Now my CardProject.vue file looks like this.
Updated CardProject

Thanks for reading this post.

Have a Nice Day Everyone πŸ˜ƒ.

Top comments (0)