【发布时间】：2017-01-14 12:56:27
【问题描述】：
我有一个 Orders 组件，它有一个子 OrdersTable 组件。我的Orders 组件将一个名为orders 的对象数组传递给我的OrdersTable 组件。但是，当我尝试在子组件中使用orders 时，它返回未定义。
这是我的Orders组件sn-p：
<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组件sn-p：
<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>
我确定我正确地将数据从父组件传递到子组件，所以我不确定发生了什么...有人可以帮忙吗？
提前致谢！
【问题讨论】：
标签： javascript components vue.js