VUE 2コンポーネントにデータを渡すときに問題が発生しました

Question

現在、Vueが新しく、APIからVueのコンポーネントへのビューにデータを渡す際に問題があります。

これが私の見解です：

<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; 
      }); 

     } 
    } 

私のコンポーネント：

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

がv-のために渡されたデータを使用することが可能ですか？

申し訳ありません申し訳ありませんが、私は多くのドキュメントを運行していません、助けてください！

Answer 1

あなたは

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

    mounted(){ 

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

    } 
} 

事前にツアーdataオプションでdataプロパティを初期化する必要があります次に、あなたのaxiosに値を設定することができますthis.data = response.data

は深さに反応性でdeclaring reactive propertiesを参照してくださいお願いします。