Вю. Как получить значение атрибута "ключ" в созданном элементе

Я пытаюсь создать компонент и получить его ключ для использования в axios. Элементы созданы, но я не могу получить ключ. Это неопределенно 

<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>

Я попробовал несколько вариантов, но безрезультатно - ключ @был пуст.

2 4
vue.js vuejs2 vue-component

2 ответа:

key является специальным атрибутом в Vue. Вам придется называть свою собственность как-то иначе.

Вот альтернатива, использующая pkey вместо этого.

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>
3

Вам не нужно использовать дополнительный атрибут. Вы можете получить ключ по 

this.$vnode.key
6