Vue。如何在創建的元素中獲取「鍵」屬性的值

Question

我嘗試創建組件並獲取在axios中使用的密鑰。 創建了元素，但我無法獲得密鑰。它是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> 

我嘗試了一些變體，但沒有結果 - @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>