Laravel

LaravelのVueComponentに対してフォームの保持情報を送る方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ Laravel 記事の目次はこちら

Laravel の VueComponent に対してフォームの保持情報を送る方法についてまとめました

Laravel Framework 8.83.8
Vue 2.6

前提

Blade に一部 Vue コンポーネントを埋め込んだページで、Vue 側でフォームを作っているような時を想定しています。

例えば、

form.blade.php

<form-component></form-component>

FormComponent.vue

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

このようにフォームの部分を VueComponent でコーディングしているようなイメージです。

結論

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>

このように old(フォームの保持情報)を props で送ってあげるのが一番単純で分かりやすいと思います。

props 名や、title などの名前の付け方は各自の環境に合わせてみてください。

まとめ

以上です。

SPA だと非同期通信で POST することが多いはずなので、このケースはあまりないかもしれませんが、

誰かの参考になればと思います。

感想・苦情は TwitterDM にご連絡ください。

それでは!

人気記事

PHP7.4 + Laravel6 のプロジェクトを AWS EC2 にデプロイする

【laravel-breadcrumbs】Laravel でパンくずリストを実装する