Meaulnes
3 weeks ago
152
3
General

Form data not transmitted on submit

Posted 3 weeks ago by Meaulnes

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?

Please sign in or create an account to participate in this conversation.