簡體   English   中英

無法從Laravel Vue通訊錄項目中的外鍵表獲取數據

[英]Unable to get data from foreign key table in Laravel Vue addressbook project

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

我嘗試過使用不同的方法,但我沒有取回任何數據,並且地址不斷出現“未定義”。 經過一個半月的嘗試,我需要幫助。 如果您需要任何其他信息,請告訴我。 一如既往地提前感謝!

好的,所以我在朋友的幫助下想通了。 好人,因此此修復的功勞歸於傑羅姆·阿洛納(Jerome Alona)...

在我的索引 vue 中,我必須更改我的 API 調用以包含 Id

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

一旦我這樣做了,它就起作用了。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM