Within my application, I have an Orders module which includes a nested component called OrdersTable. The main Orders module passes an object array named orders to the OrdersTable child component. However, when attempting to access the orders object within the child component, it returns as undefined.
Below is a snippet of the Orders component:
<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>
Here we have the code snippet for the OrdersTable component:
<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>
Despite correctly passing data from parent to child component, the issue still persists with the value returning as undefined. Any help or insights on this matter would be greatly appreciated!
Thank you in advance!