⇨ Click here for the table of contents for Laravel articles

Summary on how to send form retention information to Laravel VueComponent

Laravel Framework 8.83.8
Vue 2.6

Premise

This assumes a scenario where you have embedded some Vue components in a Blade page and are creating a form on the Vue side.

For example,

form.blade.php

<form-component></form-component>

FormComponent.vue

<template>
  <form action="/post" method="POST">
    <input name="title" />
  </form>
</template>

This is the image of coding the form part in a VueComponent.

Conclusion

from.blade.php

<form-component old='{{ old("title") }}'></form-component>

FormComponent.vue

<template>
  <form action="/post" method="POST">
    <input name="title" v-model="title" />
  </form>
</template>
<script>
  export default {
    props: {
      old: String,
    },
    data() {
      return {
        title: this.old,
      }
    },
  }
</script>

Sending the old (form retention information) via props is the simplest and most understandable method.

Please adjust the props name and naming conventions, such as 'title', to fit your own environment.

Summary

That's all.

Since SPA often involves POST via asynchronous communication, this case may not be so common, but I hope it can be helpful to someone.

For feedback or complaints, please contact me via TwitterDM.

Thank you!

Popular articles

Deploying PHP7.4 + Laravel6 project to AWS EC2

Implementing breadcrumbs in Laravel with laravel-breadcrumbs