Laravel
LaravelのVueComponentに対してフォームの保持情報を送る方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
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 にご連絡ください。
それでは！
人気記事
フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。
