Meaulnes
1 month ago
177
3
Vue

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

Posted 1 month ago by Meaulnes

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.

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