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.

The Project.vue file.

The CardProject.vue file.

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.

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.

And it threw an error.

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

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.

Thanks for reading this post.

Have a Nice Day Everyone 😃.