CODEWITHSUNDEEP
vue.jsvuejs2vue-component
McLotos
McLotos

Reputation: 504

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

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.

Upvotes: 33

Views: 42769

Answers (7)

luis
luis

Reputation: 1

This works for me

Object.keys(data.value)

Upvotes: -2

Bert
Bert

Reputation: 82439

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][1] 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>

Upvotes: 7

dmitry_stas
dmitry_stas

Reputation: 116

In Vue 3 you can get the key by

this.$.vnode.key

Upvotes: 2

dan
dan

Reputation: 336

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

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

Upvotes: 0

medvesekg
medvesekg

Reputation: 216

In Vue 3 you can get the key with:

import { getCurrentInstance} from "vue";

getCurrentInstance().vnode.key

Upvotes: 20

jarraga
jarraga

Reputation: 437

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

Upvotes: -3

Philipp Mochine
Philipp Mochine

Reputation: 4705

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

this.$vnode.key

Upvotes: 99

Related Questions