vue.jsコンポーネントで親データが定義されていない

Question

Ordersコンポーネントに子コンポーネントOrdersTableがあります。私のOrdersコンポーネントはOrdersTableコンポーネントにordersというオブジェクトの配列を渡します。しかし、子コンポーネントでordersを使用しようとすると、未定義が返されます。ここで

は私Ordersコンポーネント抜粋です。ここ

<template> 
    <div class="container"> 
     <h1>My Orders</h1> 
     <orders-table :orders="orders" :token="token"></orders-table> 
    </div> 
</template> 


<script> 

import OrdersTable from './OrdersTable.vue' 

module.exports = { 

    components: { 

     OrdersTable 

    }, 

    data: function() { 
     return { 
      orders: '', 
      token: localStorage.getItem('jwt') 
     } 
    }, 

    created: function() { 

     this.getAllOrders() 

    }, 

    methods: { 

     getAllOrders: function() { 

      var token = localStorage.getItem('jwt') 
      var self = this 

      $.ajax({ 
       type: 'GET', 
       url: 'http://localhost:3000/api/orders', 
       data: {token: localStorage.getItem('jwt')}, 
       success: function (data) { 
        self.orders = data 
       }, 
       error: function (a, b, c) { 
        console.log(a) 
        console.log(b) 
        console.log(c) 
       } 
      }) 


     }, 

    }, 

} 

</script> 

は私OrdersTableコンポーネント抜粋です：

<template> 
    <div class="container"> 
     <v-client-table :data="orders" :columns="columns" :options="options"></v-client-table> 
    </div> 
</template> 


<script> 


module.exports = { 

    data: function() { 
    return { 
     columns:['order_id', 'po_num','order_date', 'order_total'], 
     tableData: orders, //returns undefined 
     options: { 
      dateColumns: ['order_date'], 
      headings: {}, 
     }, 

    } 

    }, 

    created: function() { 
    console.log('orders:') 
    console.log(this.orders) //returns undefined 
    } 

    props: ['orders'] 

} 

</script> 

私は私はので、正しく子コンポーネントに親からデータを渡されたと確信しています何が起こっているのかわからない...誰かが助けることができる？

ありがとうございます！

Answer 1

あなたのコードで（少なくとも）二つの問題があります

1. あなたのdata機能に未定義の変数ordersにアクセスしようとしているが。あなたはthis.orders試みることができるが、これも失敗するでしょう、あなたがcreatedフックでthis.ordersにアクセスしようとしている2
2. 見るが、あなたのデータは、非同期呼び出しを使用して取得され、それがcreated