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

keyは、Vueのspecial attributeです。あなたはあなたの財産を何か他のものに呼ぶ必要があります。

代わりに代わりに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>