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

Posted 2023-03-14

【中文标题】无法从 Laravel Vue 通讯录项目中的外键表中获取数据

【英文标题】：Unable to get data from foreign key table in Laravel Vue addressbook project

【发布时间】：2021-07-31 12:17:22

【问题描述】：

我已经制作了一个完整的 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');
        
    

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

【参考方案1】：

好的，所以我在朋友的帮助下想通了。好人，因此此修复的功劳归于 Jerome Alona...

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

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

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