Question

我在Laravel中使用Vue。我正在尝试基于2个数组生成一个表，除了我在Vue中得到错误：“渲染错误：”RangeError：超出最大调用堆栈大小“。数据正在传递，因为我在Vue DevTools中看到它。

vue模板：

<template>
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover" id="table-pay">
        <thead>
            <tr role="row">
                <th>ID</th>                        
                <th>Name</th>
                <th>Email Address</th>
                <th>City, State</th>
                <th>Age Group</th>
                <th>Payment Time</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <template v-for="attendee in attendees">
                <template v-for="pmt in data">
                    <tr role="row" v-if="attendee.id == pmt.user_id">
                        <td>{{ attendee.id }}</td>
                        <td>{{ attendee.first_name }} {{ attendee.last_name }}</td>
                        <td>{{ attendee.email }}</td>
                        <td>{{ attendee.city }}, {{ attendee.state }}</td>
                        <td>{{ pmt.agegroup }}</td>
                        <td v-if="pmt.agegroup == 'High School'">HS</td>
                        <td v-else-if="pmt.agegroup == 'College'">COL</td>
                        <td v-else="pmt.agegroup == 'JNF'">JNF</td>
                        <td>{{ pmt.payment_time }}</td>
                        <td><a :href="'/admin/invoice/' + attendee.id">View Invoice</a></td>
                        <td>Unregister TODO</td>
                    </tr>
                </template>
            </template>
        </tbody>
    </table>
</div>
</template>
<script>
    export default {
        props: ['data', 'attendees']
    }
</script>

刀片模板：

<convention-payments :attendees="{{$users}}" :data="{{$vue_data}}"></convention-payments>

以下是数据库查询......如果其他人有更好的想法：

// gets payment info of attendees
$attendee_ids = $convDB->table('user_details')->where('registered', '=', '1')->orderBy('user_id', 'asc')->pluck('user_id');        
$users = $db->table('users')->whereIn('id', $attendee_ids)->select('id', 'first_name', 'last_name', 'email', 'city', 'state')->orderBy('id', 'asc')->get();
$vue_data = $convDB->table('user_payment')->whereIn('user_id', $attendee_ids)->select('user_id', 'agegroup', 'payment_time')->orderBy('user_id', 'asc')->get();

return view('convention.admin.income', ['users' => $users, 'vue_data' => $vue_data]);

基本上，我需要输出包含某些用户人口统计信息的活动的付款信息。 “用户”数据库位于服务器1上，“特定于事件的信息”数据库位于服务器2上。

我不确定是否有更好的方法来执行此操作...但我只是从服务器2上的表中提取用户ID，以指示它们是否已注册。然后使用该信息从服务器1上的用户数据库中提取信息以及从服务器2获取其付款信息。

Vue.js渲染错误：“RangeError：超出最大调用堆栈大小” - 对于laravel中的表

0 个答案: