Vue。如何在创建的元素中获取“键”属性的值

Question

我正在尝试创建一个组件并获取它的 :key 以在 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 是空的。

原文由 McLotos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个答案回答了如何将密钥 传递 给子组件的问题。如果您只想从子组件内部获取当前密钥，请使用投票最高的答案。

---

`key` 是 Vue 中的一个 [特殊属性][1]。您将不得不将您的财产称为其他名称。

这是使用 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>

原文由 Bert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您不需要使用额外的属性。您可以通过以下方式获取密钥

this.$vnode.key

原文由 Philipp Mochine 发布，翻译遵循 CC BY-SA 4.0 许可协议