Vue中的自定义表单操作

aydmsdu9 于 2022-12-23 发布在 Vue.js

关注(0)|答案(3)|浏览(190)

我正在使用Vuejs组件模板中的表单。我不想定义完整的静态URL。页面URL类似于http://example.com/en/discusses，表单应在http://example.com/comments提交。但使用

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

转到http://example.com/en/comments而不是http://example.com/comments。如何实现这一点？。提前感谢。

3条答案

您可以在routes文件（routes/web.php）中为您的发布路径命名：
例如：

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

通常，您可以在刀片视图中使用表单中的命名路由：

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

在本例中，您使用Vue组件，可以传递"postComment"路由

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

然后，接受Vue组件文件中的属性：

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

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

对于 AJAX 调用我使用axios它有axios.default.baseUrl = 'yourBaseUrl'
yourBaseUrl会在每次 AJAX 调用之前添加。

我是Vue的新手，上面的答案正是我想要做的！我只是不确定您在哪个文件中使用了Vue组件来传递“postComment”路径：

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

它会有自己的文件，通过路线作为 prop 是它的唯一目的吗？我想我错过了一些东西！
谢谢你！