Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Meaulnes's avatar

Why my date input doesn't show the initial value of the model?

I use Laravel 8 inertia vue. I have a model (activerecord) and I would like to update it, particularly a Date column. I use this component's vue

<template>
  <div class="container p-3 bg-gray-100 flex flex-col">
    <div>{{ current_post.title }}</div>
    <div v-if="edit == false" id="mode-diplay">
      <div v-html="current_post.body" class="text-gray-700"></div>
    </div>
    <div v-else id="mode-edit">
      <form class="flex flex-col" action>
        <input type="date" v-model="raw_post.beg_date" >
        <input type="text" v-model="raw_post.beg_date" >
        <input type="text" v-model="raw_post.title" />

        <textarea
          class="markdown"
          name="editor"
          id="editor"
          v-model="raw_post.body"
          rows="50"
        ></textarea>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "PostDetails",
  props: ["current_post", "raw_post", "edit"],

};
</script>

The date input seems to work (though I have not submitted the form yet) but the initial value of raw_post.beg_date is not displayed. Instead I get a placeholder like mm/jj/aaaa which is the French equivalent of mm/dd/yyyy.

Nevertheless the text input below it, works correctly and display the initial value.

How can I have the initial value displayed.

0 likes
3 replies
usaandi's avatar

console.log your props value in mounted life cycle hook

mounted() { 
	console.log(this.raw_post)
}
Meaulnes's avatar

Hi guys! Thank you for your answer. I am absolutely sure the date is good. It is correctly displayed in the text inpu t below the date input. Nevertheless I wrote what usaandi suggests and it was "09/06/2020"

Please or to participate in this conversation.