How to update a table record using laravel inertia and vue.js - laravel

Question

I use Laravel 8 inertia and vue
I want to update a post and I use this component in a main vue
<template>
<div class="container p-3 bg-green-600 flex flex-col">
<div class="mb-8 text-2xl">{{ current_post.title }}</div>
<div v-if="!edit" id="mode-display">
<div v-html="compiledMarkdown" class="text-gray-700"></div>
</div>
<div v-else id="mode-edit">
<form class="flex flex-col" #submit.prevent="updatePost">
<input type="hidden" name="id" id="id" v-model="current_post.id">
<button type="submit">Mettre à jour</button>
<div class="flex">
<div class="m-5 flex flex-col">
<label for="category">Catégorie du post</label>
<select class="px-2" name="category" id="category" v-model="current_post.category">
<option value="undefined">Sans</option>
<option value="Announcements">Annonce</option>
<option value="Narratives">Récit</option>
<option value="Pages">Page</option>
</select>
</div>
<div class="m-5 flex flex-col">
<label for="diaporama_dir">Dossier du diaporama</label>
<input name="diaporama_dir" id="diaporama_dir" type="text" placeholder="admin|1/Noël2019" v-model="current_post.diaporama_dir">
</div>
</div>
<div class="flex">
<div class="m-5">
<label for="beg_date">Date de début de l'événement</label>
<date-picker name="beg_date" format="YYYY-MM-DD" valueType="format" v-model="current_post.beg_date"></date-picker>
</div>
<div class="m-5">
<label for="end_date">Date de fin de l'événement</label>
<date-picker name="end_date" format="YYYY-MM-DD" valueType="format" v-model="current_post.end_date"></date-picker>
</div>
<div class="m-5">
<label for="close_date">Date de clôture des inscriptions</label>
<date-picker name="close_date" format="YYYY-MM-DD" valueType="format" v-model="current_post.close_date"></date-picker>
</div>
<div class="m-5 flex flex-col">
<label for="receive_registration">Accepte des inscriptions</label>
<select class="px-2" name="receive_registration" id="receive_registration" v-model="current_post.receive_registration">
<option value="false">Non</option>
<option value="true">Oui</option>
</select>
</div>
</div>
<input class="p-5 mb-5 text-xl" type="text" v-model="current_post.title" />
<div class="m-5 flex flex-col">
<label for="abstract">Résumé</label>
<textarea class="markdown bg-green-500 text-gray-100" name="abstract" id="abstract" v-model="current_post.abstract" rows="3"></textarea>
</div>
<div class="m-5 flex flex-col">
<label for="body">Résumé</label>
<textarea class="markdown bg-green-500 text-gray-100" name="body" id="body" v-model="current_post.body" rows="50"></textarea>
</div>
</form>
</div>
</div>
</template>
<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import 'vue2-datepicker/locale/fr';
import marked from 'marked';
export default {
name: "PostDetails",
props: ["current_post", "edit"],
components: {
DatePicker
},
data() {
return {
form:{
id:null,
title: null,
abstract: null,
body: null,
category: null,
beg_date: null,
end_date: null,
close_date : null,
receive_registration : null,
diaporama_dir: null
}
};
},
methods:{
updatePost(){
this.$inertia.post('/post', this.form);
}
},
computed: {
compiledMarkdown: function () {
if (this.current_post) {
//transform markdown to html
return marked(this.current_post.body);
}
},
mounted() {},
}
};
</script>
When displaying this template with the form , I receive a correct post and its values are correctly displayed in the various input fields.
My controller, at the moment is very simple :
public function Update(Request $request)
{
dd($request);
}
On submitting this form the dd outputs this:
Illuminate\Http\Request {#43 ▼
#json: Symfony\Component\HttpFoundation\ParameterBag {#35 ▶}
#convertedFiles: null
#userResolver: Closure($guard = null) {#342 ▶}
#routeResolver: Closure() {#351 ▶}
+attributes: Symfony\Component\HttpFoundation\ParameterBag {#45 ▶}
+request: Symfony\Component\HttpFoundation\ParameterBag {#35 ▼
#parameters: array:10 [▼
"id" => null
"title" => null
"abstract" => null
"body" => null
"category" => null
"beg_date" => null
"end_date" => null
"close_date" => null
"receive_registration" => null
"diaporama_dir" => null
]
}
+query: Symfony\Component\HttpFoundation\InputBag {#51 ▶}
+server: Symfony\Component\HttpFoundation\ServerBag {#47 ▶}
+files: Symfony\Component\HttpFoundation\FileBag {#48 ▶}
+cookies: Symfony\Component\HttpFoundation\InputBag {#46 ▶}
+headers: Symfony\Component\HttpFoundation\HeaderBag {#49 ▶}
#content: "{"id":null,"title":null,"abstract":null,"body":null,"category":null,"beg_date":null,"end_date":null,"close_date":null,"receive_registration":null,"diaporama_dir ▶"
#languages: null
#charsets: null
#encodings: null
#acceptableContentTypes: null
#pathInfo: "/post"
#requestUri: "/post"
#baseUrl: ""
#basePath: null
#method: "POST"
#format: null
#session: Illuminate\Session\Store {#392 ▶}
#locale: null
#defaultLocale: "en"
-preferredFormat: null
-isHostValid: true
-isForwardedValid: true
-isSafeContentPreferred: null
basePath: ""
format: "html"
}
It seems to me I am obeying the guidance given in this page https://inertiajs.com/forms but why on earth the form's value are not uploaded to the server?

Answer 1

In your code, you're sending the form object (which is full of null values).
For now, you can fix it like this:
updatePost () {
this.$inertia.post('/post', this.current_post);
}
But probably you're having a vue-warn saying that it's not recommended to edit a prop.
so I suggest also the following:
you receive the post prop as current_post
you should copy it to your form object (on mounted)
link all of your form inputs to the form object instead of current_post

Answer 2

I can not add a comment yet but wanted to add that if You clone a reactive object You are not actually copying it. The cloned object is the same as the original and modifying this new object modifies the original object too and vice versa so basically You are doing exactly the same thing that got You in trouble at the first place: Modifying properties.
Vue states that You should not modify a property because if a parent component modifies a prop your changes are gone.
Lodash clonedeep creates a new object from the property:
this.items = _.cloneDeep(this.data);