28
votes

I am trying to create a component and get its :key for using in axios.

The element is created, but I can't get a key. It's undefined.

    <div class="container" id="root">
        <paddock is="paddock-item" v-for="paddock in paddocks" :key="paddock.key" class="paddock">
        </paddock>
    </div>
    <script>
    var pItem = {
        props: ['key'],
        template: '<div :test="key"></div>',
        created: function() {
            console.log(key);
        }
        };
    new Vue({
        el: '#root',
        components: {
            'paddock-item': pItem
        },
        data: {
            paddocks: [
                {key: 1},
                {key: 2},
                {key: 3},
                {key: 4}
            ]
        }
    })
    </script>

I tried some variants, but no result. key was empty.

5

5 Answers

94
votes

you don't need to use an extra attribute. You can get the key by

this.$vnode.key
5
votes

In Vue 3 you can get the key with:

import { getCurrentInstance} from "vue";

getCurrentInstance().vnode.key

5
votes

This answer answers the question of how you would pass the key to a child component. If you just want to get the current key from inside the child component, use the highest voted answer.


keyspecial attribute

Here is an alternative using pkey instead.

console.clear()
var pItem = {
  props: ['pkey'],
  template: '<div :test="pkey"></div>',
  created: function() {
    console.log(this.pkey);
  }
};
new Vue({
  el: '#root',
  components: {
    'paddock-item': pItem
  },
  data: {
    paddocks: [{
        key: 1
      },
      {
        key: 2
      },
      {
        key: 3
      },
      {
        key: 4
      }
    ]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div class="container" id="root">
  <paddock-item v-for="paddock in paddocks" :pkey="paddock.key" :key="paddock.key" class="paddock">
  </paddock-item>
</div>
0
votes

Using Vue extension for chrome you can see the keys in the elements tree:

Vue keys

Here is the link to extension: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

0
votes

Using this.$options._parentVnode.key work for me:

created() {
   console.log(this.$options._parentVnode.key)
}