VUE 2 Probleme beim Durchlaufen von Daten zur Komponente

Question

Ich bin aktuell neu in Vue und habe Probleme beim Übergeben von Daten von einer API zu einer Ansicht an eine Komponente in Vue.

Das ist meine Ansicht:

<template lang="pug"> 
div.mt-3 
    licenses(v-show="navItem == 'Licenses'", :data="data") 
    products(v-show="navItem == 'Products'") 
    users(v-show="navItem == 'Users'") 
    locations(v-show="navItem == 'Locations'") 
</template> 

<script> 
import licenses from '../components/licenses.vue'; 
import products from '../components/products.vue'; 
import users from '../components/users.vue'; 
import locations from '../components/locations.vue'; 

export default { 
     components:{ 
      licenses, 
      products, 
      users, 
      locations 
     }, 

     mounted(){ 

      window.axios.get('/clients/1').then((response) => { 
       this.data = response.data; 
      }); 

     } 
    } 

meine Komponente:

<template lang="pug"> 
    .row.mt-3 
     .col-sm-4(v-for="item in data.licenses") 
     //.col-sm-4(v-for="item in data.licenses") 
      b-card.mb-2(:header="item.product.name") 
       h4.text-capitalize(slot="header") {{item.product.name}} License Usage 
       p {{item.product.description}} 
       div.text-center 
        .col-sm-10.offset-1 
         div.progress-number {{item.amountUsed}}/{{item.amountAllocated}} 
         b-progress(v-model="item.amountUsed", :max="item.amountAllocated", animation=true) 
          span.progress-item 
         p.text-center.mt-3 This means you have {{item.amountRemaining}} licenses left. 
       .form-group.mt-1 
        label LICENSES KEY 
        input.form-control.text-center(:placeholder="item.licenseKey", readonly) 


</template> 
<style> 

</style> 
<script> 
    export default{ 
     props:{ 
      data 
     } 
    } 
</script> 

Ist es möglich, Daten zu verwenden, die in einer V-für geführt wurde?

Tut mir leid, ich habe nicht viel Glück mit der Dokumentation, bitte helfen!

Answer 1

Sie sollten die data Eigenschaft in Tour data Option vorher

export default { 
    data(){ 
     return{ 
      data: null 
     } 
    }, 
    components:{ 
     licenses, 
     bproducts, 
      users, 
     locations 
    }, 

    mounted(){ 

     window.axios.get('/clients/1').then((response) => { 
      this.data = response.data; 
     }); 

    } 
} 

initialisieren Dann können Sie den Wert in Ihrem axios this.data = response.data gesetzt fordern in der Tiefe

Siehe declaring reactive properties in der Reaktivität.