'Access to pivot table field using Vue.js
I started working on a small project using Laravel, and i would like to access to the pivot table to get the position field, that i have in organisation_user (pivot table).
This is my vue.js code:
<td>{{ organisation.pivot.position }}</td>
This is my Model code :
public function organisations(){
return $this->belongsToMany(Organisation::class)->withPivot('position');
}
My Controller
return response()->json([
'organisations' => $this->data['client']->organisations
]);
my dd
Illuminate\Database\Eloquent\Collection {#5456
#items: array:1 [
0 => App\Organisation {#5489
#mimeType: array:54 [
"txt" => "fa-file-text"
"htm" => "fa-file-code-o"
"html" => "fa-file-code-o"
"css" => "fa-file-code-o"
"js" => "fa-file-code-o"
"json" => "fa-file-code-o"
"xml" => "fa-file-code-o"
"swf" => "fa-file-o"
"CR2" => "fa-file-o"
"flv" => "fa-file-video-o"
"png" => "fa-file-image-o"
"jpe" => "fa-file-image-o"
"jpeg" => "fa-file-image-o"
"jpg" => "fa-file-image-o"
"gif" => "fa-file-image-o"
"bmp" => "fa-file-image-o"
"ico" => "fa-file-image-o"
"tiff" => "fa-file-image-o"
"tif" => "fa-file-image-o"
"svg" => "fa-file-image-o"
"svgz" => "fa-file-image-o"
"zip" => "fa-file-o"
"rar" => "fa-file-o"
"exe" => "fa-file-o"
"msi" => "fa-file-o"
"cab" => "fa-file-o"
"mp3" => "fa-file-audio-o"
"qt" => "fa-file-video-o"
"mov" => "fa-file-video-o"
"mp4" => "fa-file-video-o"
"mkv" => "fa-file-video-o"
"avi" => "fa-file-video-o"
"wmv" => "fa-file-video-o"
"mpg" => "fa-file-video-o"
"mp2" => "fa-file-video-o"
"mpeg" => "fa-file-video-o"
"mpe" => "fa-file-video-o"
"mpv" => "fa-file-video-o"
"3gp" => "fa-file-video-o"
"m4v" => "fa-file-video-o"
"pdf" => "fa-file-pdf-o"
"psd" => "fa-file-image-o"
"ai" => "fa-file-o"
"eps" => "fa-file-o"
"ps" => "fa-file-o"
"doc" => "fa-file-text"
"rtf" => "fa-file-text"
"xls" => "fa-file-excel-o"
"ppt" => "fa-file-powerpoint-o"
"docx" => "fa-file-text"
"xlsx" => "fa-file-excel-o"
"pptx" => "fa-file-powerpoint-o"
"odt" => "fa-file-text"
"ods" => "fa-file-text"
]
#default: array:1 [
0 => "id"
]
#hidden: array:3 [
0 => "created_at"
1 => "updated_at"
2 => "pivot"
]
#filterable: array:1 [
0 => "id"
]
#relationAttributes: []
#guarded: []
#raw: []
#connection: "mysql"
#table: "organisations"
#primaryKey: "id"
#keyType: "int"
+incrementing: true
#with: []
#withCount: []
#perPage: 15
+exists: true
+wasRecentlyCreated: false
#attributes: array:13 [
"id" => 1
"organisation_name" => "Doukkala"
"phone" => "4382251059"
"fax" => "4382251059"
"address" => "rue paris"
"city" => "Montreal"
"zipcode" => "24000"
"website" => "social"
"linkedin" => "social"
"facebook" => "social"
"twitter" => "social"
"created_at" => null
"updated_at" => null
]
#original: array:16 [
"id" => 1
"organisation_name" => "Doukkala"
"phone" => "4382251059"
"fax" => "4382251059"
"address" => "rue paris"
"city" => "Montreal"
"zipcode" => "24000"
"website" => "social"
"linkedin" => "social"
"facebook" => "social"
"twitter" => "social"
"created_at" => null
"updated_at" => null
"pivot_user_id" => 3
"pivot_organisation_id" => 1
"pivot_position" => "CEO"
]
#changes: []
#casts: []
#dates: []
#dateFormat: null
#appends: []
#dispatchesEvents: []
#observables: []
#relations: array:1 [
"pivot" => Illuminate\Database\Eloquent\Relations\Pivot {#5457
+incrementing: false
#guarded: []
#connection: "mysql"
#table: "organisation_user"
#primaryKey: "id"
#keyType: "int"
#with: []
#withCount: []
#perPage: 15
+exists: true
+wasRecentlyCreated: false
#attributes: array:3 [
"user_id" => 3
"organisation_id" => 1
"position" => "CEO"
]
#original: array:3 [
"user_id" => 3
"organisation_id" => 1
"position" => "CEO"
]
#changes: []
#casts: []
#dates: []
#dateFormat: null
#appends: []
#dispatchesEvents: []
#observables: []
#relations: []
#touches: []
+timestamps: false
#hidden: []
#visible: []
#fillable: []
+pivotParent: App\User {#5498
#fillable: array:10 [
0 => "name"
1 => "email"
2 => "password"
3 => "mobile"
4 => "login"
5 => "status"
6 => "image"
7 => "gender"
8 => "locale"
9 => "onesignal_player_id"
]
#hidden: array:4 [
0 => "password"
1 => "remember_token"
2 => "created_at"
3 => "updated_at"
]
+dates: array:2 [
0 => "created_at"
1 => "updated_at"
]
#appends: array:4 [
0 => "unreadNotifications"
1 => "image_url"
2 => "modules"
3 => "user_other_role"
]
#mimeType: array:54 [
"txt" => "fa-file-text"
"htm" => "fa-file-code-o"
"html" => "fa-file-code-o"
"css" => "fa-file-code-o"
"js" => "fa-file-code-o"
"json" => "fa-file-code-o"
"xml" => "fa-file-code-o"
"swf" => "fa-file-o"
"CR2" => "fa-file-o"
"flv" => "fa-file-video-o"
"png" => "fa-file-image-o"
"jpe" => "fa-file-image-o"
"jpeg" => "fa-file-image-o"
"jpg" => "fa-file-image-o"
"gif" => "fa-file-image-o"
"bmp" => "fa-file-image-o"
"ico" => "fa-file-image-o"
"tiff" => "fa-file-image-o"
"tif" => "fa-file-image-o"
"svg" => "fa-file-image-o"
"svgz" => "fa-file-image-o"
"zip" => "fa-file-o"
"rar" => "fa-file-o"
"exe" => "fa-file-o"
"msi" => "fa-file-o"
"cab" => "fa-file-o"
"mp3" => "fa-file-audio-o"
"qt" => "fa-file-video-o"
"mov" => "fa-file-video-o"
"mp4" => "fa-file-video-o"
"mkv" => "fa-file-video-o"
"avi" => "fa-file-video-o"
"wmv" => "fa-file-video-o"
"mpg" => "fa-file-video-o"
"mp2" => "fa-file-video-o"
"mpeg" => "fa-file-video-o"
"mpe" => "fa-file-video-o"
"mpv" => "fa-file-video-o"
"3gp" => "fa-file-video-o"
"m4v" => "fa-file-video-o"
"pdf" => "fa-file-pdf-o"
"psd" => "fa-file-image-o"
"ai" => "fa-file-o"
"eps" => "fa-file-o"
"ps" => "fa-file-o"
"doc" => "fa-file-text"
"rtf" => "fa-file-text"
"xls" => "fa-file-excel-o"
"ppt" => "fa-file-powerpoint-o"
"docx" => "fa-file-text"
"xlsx" => "fa-file-excel-o"
"pptx" => "fa-file-powerpoint-o"
"odt" => "fa-file-text"
"ods" => "fa-file-text"
]
#default: array:1 [
0 => "id"
]
#filterable: array:1 [
0 => "id"
]
#relationAttributes: []
#guarded: []
#raw: []
#connection: "mysql"
#table: "users"
#primaryKey: "id"
#keyType: "int"
+incrementing: true
#with: []
#withCount: []
#perPage: 15
+exists: true
+wasRecentlyCreated: false
#attributes: array:14 [
"id" => 3
"name" => "Mr. Donald Stanton"
"email" => "[email protected]"
"password" => "$2y$10$5n8iLkaabT4GFA9IEEzfVO3pAYnvF2yNedJUGQTAyp7v9Eb1qjPxm"
"remember_token" => null
"image" => null
"mobile" => null
"gender" => "male"
"locale" => "en"
"status" => "active"
"login" => "enable"
"onesignal_player_id" => null
"created_at" => "2020-07-04 16:24:50"
"updated_at" => "2020-07-04 16:24:50"
]
#original: array:14 [
"id" => 3
"name" => "Mr. Donald Stanton"
"email" => "[email protected]"
"password" => "$2y$10$5n8iLkaabT4GFA9IEEzfVO3pAYnvF2yNedJUGQTAyp7v9Eb1qjPxm"
"remember_token" => null
"image" => null
"mobile" => null
"gender" => "male"
"locale" => "en"
"status" => "active"
"login" => "enable"
"onesignal_player_id" => null
"created_at" => "2020-07-04 16:24:50"
"updated_at" => "2020-07-04 16:24:50"
]
#changes: []
#casts: []
#dateFormat: null
#dispatchesEvents: []
#observables: []
#relations: array:1 [
"organisations" => Illuminate\Database\Eloquent\Collection {#5456}
]
#touches: []
+timestamps: true
#visible: []
#rememberTokenName: "remember_token"
}
#foreignKey: "user_id"
#relatedKey: "organisation_id"
}
]
#touches: []
+timestamps: true
#visible: []
#fillable: []
}
]
}
My Axios code :
axios.get('/admin/clients/' + this.profileInfos.id).then(response => {
this.getOrganisations(response.data.organisations);
}).catch(error => {
});
The output of response.data.organisations :
0:
address: (...)
city: (...)
facebook: (...)
fax: (...)
id: (...)
linkedin: (...)
organisation_name: (...)
phone: (...)
twitter: (...)
website: (...)
zipcode: (...)
By the way every thing is ok, my issue is just i don't get the Position field that i have in my pivot table
Solution 1:[1]
When making a json request, Laravel serializes the model using the $visible, $hidden and $appends model properties.
To add the pivot field to your json response you should add 'pivot' to the $visible property of your organisation model:
class Organisation extends Model
{
protected $visible = ['pivot'];
// ...
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | marabunta2048 |