Search code examples
formslaravelvue.js

Custom form action in Vue

i am using form in Vuejs component template. i don't want to define full static URL. the page URL is like http://example.com/en/discusses and form should submit at http://example.com/comments. but using 

<form action = "comments" method ="POST">

goes to http://example.com/en/comments instead of http://example.com/comments. How to achieve this?. Thank you in advance.

Solution

  • You can give your post route a name in the routes file (routes/web.php):

    For example: 

    Route::post('/comments', 'SomeController@store')->name('postComment');

    Normally then, you can use the named route in your form in the blade view: 

    <form action="{{ route('postComment') }}" method="POST">
</form>

    In this case you use a Vue component, you can pass the 'postComment' route 

    <component post-route="{{ route('postComment') }}"></component>

    Then, accept the property in your Vue component file:

    <template>
 <form action="this.post-route" method="POST"></form>
</template>

<script>
export default {
 props: ['post-route']
}
</script>