vue.js - tiene - office 32 bits

Vue. Cómo obtener un valor de un atributo "clave" en el elemento creado

Question

Intento crear componentes y obtener su clave para usar en axios. Elementos creados, pero no puedo obtener una clave. No está definido

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

Intento algunas variantes, pero ningún resultado - @key estaba vacía.

Answer 1

key es un atributo especial en Vue. Tendrá que llamar a su propiedad algo más.

Aquí hay una alternativa usando pkey en pkey lugar.

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>