[英]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.