未在vue.js組件中定義的父數據

我有一個Orders組件，它具有子組件OrdersTable。我的Orders組件將一個名爲orders的對象數組傳遞到我的OrdersTable組件。但是，當我嘗試在子組件中使用orders時，它將返回undefined。未在vue.js組件中定義的父數據

這是我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>

我敢肯定，我傳遞的數據從父到子組件正確，所以我不知道發生了什麼......有人可以幫忙嗎？

在此先感謝！

來源

2016-09-07 Trung Tran

有（至少）兩個問題與您的代碼：

您試圖訪問未定義的變量orders在data功能。你可以嘗試this.orders但是這也將失敗，看到2
您試圖訪問this.orders在created掛鉤，但使用異步調用你的數據被取出，所以沒有保證，這將是那裏created

來源

2016-09-07 06:19:53 pkawiak

是的 - 我認爲這可能與異步有關...有沒有一種方法可以確保數據加載之前，我可以使用this.orders？ –

您可以使用[watch]（http://vuejs.org/api/#watch）觀看屬性更改。這樣，當道具改變時你的處理程序將始終被調用。你也可以簡單地在你的模板中使用'orders'，例如在'v-for'中，Vue將確保每次'訂單'改變 – pkawiak

時更新dom，非常感謝！ –

未在vue.js組件中定義的父數據

回答

相關問題