Vue. How to get a value of a "key" attribute in created element

Question

I try to create a components and get its key for using in axios. Elements 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 try some variants, but no result - @key was empty.

Answer 1

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

this.$vnode.key 

Answer 2

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.

---

key is a special attribute in Vue. You will have to call your property something else.

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>