Question

我有一个Orders组件，它有一个子OrdersTable组件。我的Orders组件将名为orders的对象数组传递给我的OrdersTable组件。但是，当我尝试在子组件中使用orders时，它返回undefined。

以下是我的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

您的代码存在（至少）两个问题：

您正尝试在orders函数中访问未定义的变量data。您可以尝试this.orders，但这也会失败，请参阅2
您正试图访问this.orders挂钩中的created，但您的数据是使用异步调用获取的，因此无法保证created < / LI>

父数据未在vue.js组件中定义

1 个答案: