CODEWITHSUNDEEP
vue.jsvuejs2vue-component
MuyBien
MuyBien

Reputation: 163

What is the name of my Vue component?

I'm trying to use Vue for a little project. I started with only client code. So when I did 

const mv = new Vue({...});

I was able to access to the component from outside with a mv.
Now I'm using Vue.cli, so I define my component inside a mv.vue and then I have

export default {
    data () {}
    }

Here, how can I get the nme of my component?

Thanks for any reply or hint :)

Upvotes: 3

Views: 5103

Answers (3)

Paul F. Wood
Paul F. Wood

Reputation: 1775

To expand on the very good @vamsi-krishna answer, and update it, I've discovered that Vue now often puts a prefix on the $vnode.tag along the lines of vue-component-3-YourComponentName.

You can fix this by using the following code. And perhaps, just in case of a missing tag, fall back to the ID of the root element in the component.

Occasionally, Vue doesn't pass back a component at all in its errorHandler and warnHandler global events. So I've handled that scenario first.

if (!vm){
    return '[unknown]'
}

if (vm.$vnode.tag) {
    const res = vm.$vnode.tag
    return res.replace(/vue-component-\d+-/i, '')
}

if (vm.$el.id) {
    return vm.$el.id
}

Upvotes: 1

Vamsi Krishna
Vamsi Krishna

Reputation: 31362

You can get the name of the component , you can do this

this.$vnode.tag

If you want the parent component's name from its child do this

this.$parent.$vnode.tag

Upvotes: 3

Dan Gamble
Dan Gamble

Reputation: 4155

You can name your component like so:

export default {
  name: 'mv',

  data () {
    return {}
  }
}

But to access it you'd need to use the name that you import it with. For example:

import theVariableIWantItToBe from './mv.vue'

console.log(theVariableIWantItToBe)

Upvotes: 0

Related Questions