无法从Laravel Vue通讯录项目中的外键表获取数据

Question

我已经制作了一个完整的 laravel 通讯簿，但我无法获取 laravel vue 项目中每个联系人的任何地址数据。

我有效地调用了模式，并且联系数据通过但不是关联的地址。

模态（在 index.vue 中）

   <!-- Details Modal-->
                <Modal
                    v-model="detailsModal"
                    title="Contact Details"
                    :mask-closable="false"
                    :closable="false">
                    <!--~~~~~~~ Addresses Table ~~~~~~~~~-->
                    <div class="_1adminOverveiw_table_recent _box_shadow _border_radious _mar_b30 _p20">
                        <p class="_title0">Contacts Details<Button type="success" @click="createAddressModal=true"><Icon type="md-add" />Add Contact</Button></p>
                        <h5>{{this.contactDetailsData.firstName}}</h5>
                        <h4>{{this.contactDetailsData.firstName}} {{this.contactDetailsData.lastName}}</h4>
                        <h2>{{this.contactDetailsData.phone}}</h2>
                        <h2>{{this.contactDetailsData.email}}</h2>
                        <div class="_overflow _table_div">
                            <table class="_table">
                                    <!-- TABLE TITLE -->
                                <tr>
                                    <th>Number</th>
                                    <th>Street</th>
                                    <th>City</th>
                                    <th>State</th>
                                    <th>Zip</th>
                                    <th>Type</th>
                                    <th>Action</th>
                                </tr>
                                    <!-- TABLE TITLE --><!-- ITEMS -->
                                <tr v-for="(addresses, i) in addressList" :key="i">
                                <!-- v-if="contactss.length" -->
                                    <td>{{addresses.number}}</td>
                                    <td>{{addresses.street}}</td>
                                    <td>{{addresses.city}}</td>
                                    <td>{{addresses.state}}</td>
                                    <td>{{addresses.zip}}</td>
                                    <td>{{addresses.type}}</td>
                                    <td>
                                        <Button type="warning" size="small" @click="showEditAddressModal(addresses, i)">Edit</Button>
                                        <Button type="error" size="small" @click="$router.push({path: 'deleteAddress', params: { id: $route.params.id },})">Delete</Button>
                                        <Button
                                            type="error"
                                            size="small"
                                            @click="showDeleteAddressModal(addresses, i)"
                                            :loading="addresses.isDeleting">Delete
                                        </Button>
                                    </td>
                                </tr>
                                    <!-- ITEMS -->
                            </table>
                        </div>
                    </div>
                </Modal>

模态脚本（在 index.vue 中）

        async showDetailsModal(contact, index){
            let obj = {
                id : contact.id,
                firstName : contact.firstName,
                lastName : contact.lastName,
                email : contact.email,
                phone : contact.phone,
                birthday : contact.birthday,
                addresses : contact.addresses
            },
            contactDetailsData = obj
            console.log(contactDetailsData)
            const res =  await this.callApi('get', 'app/details', contact)
            console.log(res)
            if(res.status===200){
                this.addressList = res.data
                this.showDetailsModal = true
            } else {
                this.swr(error)
            }
            this.index = index
        },

Web.php

// Addresses Routes
    Route::get('/app/details', 'App\Http\Controllers\ContactController@details');
    Route::post('/app/createAddress', 'App\Http\Controllers\ContactController@createAddress');
    Route::post('/app/editAddress', 'App\Http\Controllers\ContactController@editAddress');
    Route::post('/app/deleteAddress', 'App\Http\Controllers\ContactController@deleteAddress');

接触控制器

    // Addresses
    public function details(Request $request) {
        // dump($request);
        $contactData = Contact::find($request->id);

        $addressList = $contactData->addresses;
        // $data = [$contactData,$addressLists];
        dump($addressList);
        // dump($contactData);
        if($addressList) {
            // $addressLists = $contactData->addresses;
            // return ($contactData);
            return ($addressList);
        } else {
            return response()->json('The contact details failed');
            // return redirect('index');
        }
    }

我尝试过使用不同的方法，但我没有取回任何数据，并且地址不断出现“未定义”。 经过一个半月的尝试，我需要帮助。 如果您需要任何其他信息，请告诉我。 一如既往地提前感谢！

Answer 1

好的，所以我在朋友的帮助下想通了。 好人，因此此修复的功劳归于杰罗姆·阿洛纳（Jerome Alona）...

在我的索引 vue 中，我必须更改我的 API 调用以包含 Id

const res =  await this.callApi('get' , 'app/details?id=' + contact.id , contactDetailsData)

一旦我这样做了，它就起作用了。