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

        
                      

              相关标签:
       
      

Answer 1

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>

Answer 2

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

this.$vnode.key

Answer 3

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

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