IM trying to make an Updateform with Inertia in Vue, now i have a problem with my multiselct arrays, if i wanna update they are always empty, i guess because its the object and not only the id which is given. But i need the ids of the objects to store them in a pivot table in my db. And on load it should show the already selected items. For now its pretty confusing to select the ones which i want. If anybody know how that problem can be solved i will be very glad!
This is my Form script
export default {
name: "Edit",
components: {Heading, Authenticated, useForm},
props: {
seasons: Object,
topics: Object,
speakers: Object,
track: Object,
track_speakers: Object,
track_topics: Object,
},
setup(props) {
const trackUpdateForm = useForm({
track_title: props.track.title,
track_description: props.track.description,
track_data: props.track.data,
track_image: props.track.track_image,
season_id: props.track.season_id,
speakers: props.track_speakers,
moderators: props.track_speakers,
topics: props.track_topics,
})
return {trackUpdateForm}
},
methods: {
submit() {
Inertia.post(route('admin.tracks.update', this.track.id), {
_method: 'put',
track_title: this.trackUpdateForm.track_title,
track_description: this.trackUpdateForm.track_description,
track_data: this.trackUpdateForm.track_data,
track_image: this.trackUpdateForm.track_image,
season_id: this.trackUpdateForm.season_id,
speakers: this.trackUpdateForm.speakers,
moderators: this.trackUpdateForm.moderators,
topics: this.trackUpdateForm.topics,
})
},
},
mounted() {
console.log(this.track_topics)
}
These are my multiselect form inputs
<div class="mt-6">
<label class="block text-left">
<span class="block mb-2 text-lg">Topics:</span>
<select v-model="trackUpdateForm.topics" name="topics[]" class="form-multiselect block w-full mt-1" multiple>
<option selected="true" v-for="topic in track_topics" :value="topic.id">Selected: {{topic.name}}</option>
<option v-for="topic in topics" :value="topic.id">{{topic.name}}</option>
</select>
</label>
</div>
<div class="mt-6">
<label class="block text-left">
<span class="block mb-2 text-lg">Moderator/en:</span>
<select v-model="trackUpdateForm.moderators" name="moderators[]" class="form-multiselect block w-full mt-1" multiple>
<option selected="true" v-for="moderator in track_speakers" :value="moderator.id"><span v-if="moderator.pivot.is_moderator === 1">Selected: {{moderator.first_name + " " + moderator.last_name}}</span></option>
<option v-for="moderator in speakers" :value="moderator.id">{{moderator.first_name + " " + moderator.last_name}}</option>
</select>
</label>
</div>
<div class="mt-6">
<label class="block text-left">
<span class="block mb-2 text-lg">Sprecher/Gäste:</span>
<select v-model="trackUpdateForm.speakers" name="speakers[]" class="form-multiselect block w-full mt-1" multiple>
<option selected="true" v-for="speaker in track_speakers" :value="speaker.id"><span v-if="speaker.pivot.is_moderator === null">Selected: {{speaker.first_name + " " + speaker.last_name}}</span></option>
<option v-for="speaker in speakers" :value="speaker.id">{{speaker.first_name + " " + speaker.last_name}}</option>
</select>
</label>
</div>
</div>
</div>
<div>
{{trackUpdateForm.moderators}} <- Empty Array
{{trackUpdateForm.topics}} <- Empty Array
{{trackUpdateForm.speakers}} <- Empty Array
{{trackUpdateForm.season_id}} <- Shows the correct Id
</div>
My Controller in Laravel
public function edit(Track $track): Response
{
//
$trackSpeaker = $track->speakers()->get();
$trackTopics = $track->topics()->get();
return Inertia::render('Backend/Tracks/Edit', ['track' => $track, 'track_speakers' => $trackSpeaker, 'track_topics' => $trackTopics ,'seasons' => Season::all(), 'topics' => Topic::all(), 'speakers' => Speaker::all()]);
}
/**
* Update the specified resource in storage.
*
* @param Request $request
* @param Track $track
* @return RedirectResponse
* @throws Exception
*/
public function update(Request $request, Track $track)
{
//
$track->setAttribute(Track::TRACK_SEASON_ID, $request->get('season_id'));
//TrackTitle
$track->setAttribute(Track::TRACK_TITLE, $request->get('track_title'));
//TrackDesc
$track->setAttribute(Track::TRACK_DESCRIPTION, $request->get('track_description'));
if ($request->file('track_data')) {
File::delete(public_path('/uploads/tracks/' . $track->getAttribute('data')));
do {
$hashedName = Helper::getRandomString() . "." . $request->file('track_data')->getClientOriginalExtension();
} while (Track::where(Track::TRACK_DATA, $hashedName)->count());
$request->file('track_data')->storeAs('/uploads/tracks', $hashedName);
$track->setAttribute(Track::TRACK_DATA, $hashedName);
}
if ($request->file('track_image')) {
File::delete(public_path('/uploads/tracks/thumbnail/' . $track->getAttribute('track_image')));
do {
$imageHash = Helper::getRandomString() . "." . $request->file('track_image')->getClientOriginalExtension();
} while (Track::where(Track::TRACK_IMAGE, $imageHash)->count());
$request->file('track_image')->storeAs('/uploads/tracks/thumbnail', $imageHash);
$track->setAttribute(Track::TRACK_IMAGE, $imageHash);
}
//checks if topics have input if yes check again if they are already connected if yes throw error if no save the new one
$track->topics()->detach();
if ($request->input('topics')) {
$track->topics()->detach();
$track->topics()->attach($request->input('topics'));
}
//checks if speakers have input, if yes check again if they are already connected, if yes throw error - if no save the new one
$track->speakers()->detach();
if ($request->input('speakers')) {
$track->speakers()->attach($request->input('speakers'));
}
//checks if moderators have input, if yes check again if they are already connected, if yes throw error - if no save the new one
if ($request->input('moderators')) {
//write them as moderator in table
$data = [];
foreach ($request->input('moderators') as $moderatorId) {
$data[$moderatorId] = ['is_moderator' => 1];
};
$track->speakers()->detach($data);
$track->speakers()->attach($data);
}
$track->update();
return Redirect::route('admin.tracks.index');
}
