Vue公司.如何在创建的元素中获取"key"属性的值

Question

我尝试创建一个组件并获得在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>

我尝试了一些变种,但没有结果 - @key是空的.

Answer 1

您不需要使用额外的属性.你可以得到钥匙

this.$vnode.key

Answer 2

在 Vue 3 中，你可以通过以下方式获取密钥：

import { getCurrentInstance} from "vue";

getCurrentInstance().vnode.key

Answer 3

这个答案回答，你会如何的问题通过的关键子组件。如果您只是想从子组件内部获取当前密钥，请使用投票率最高的答案。

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>