Laravel Spark 表单如何提交？

Question

Laravel Spark 在其设置区域中有多种形式。这是添加团队的一个。

如果我查看此表单的源代码，我会看到以下内容。

此表单的 HTML 来源如下所示

<form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-md-4 control-label">
            Team Name
        </label>
        <div class="col-md-6">
            <input type="text" id="create-team-name" name="name" class="form-control">
<!---->
                <span class="help-block" style="display: none;">
                </span>
            </div>
        </div>
    <div class="form-group">
        <div class="col-md-offset-4 col-md-6">
            <button type="submit" class="btn btn-primary">
                Create 
            </button>
        </div>
    </div>
</form>

具体来说，表单本身没有action或type参数

<form role="form" class="form-horizontal">

我的假设是有一些 javascript 运行处理所有这些（一个 Vue JS 组件），但不清楚

Team Creation javascript 来源所在的位置，and/or Spark 创建组件的位置
我如何回溯特定形式到它的 javascript

这里是经验丰富的程序员 -- 刚刚接触 Spark，希望这是 simple/obvious 适合经验丰富的 Spark 开发人员的。

Answer 1

Spark 中的每个 <form> 通常由包含其定义的 Vue.js 组件处理，尽管它们没有 action 或 method 属性，但它们 do 有特殊的 Vue 指令，例如 @submit（如果是 <button type="submit">，则为 @click）。您在开发工具的 HTML 中看不到它们的原因是因为这些指令是在渲染之前编译的。

因此，您所指的表单已包装在 <spark-create-team> 标记中。您可以在 /resources/assets/js/spark-components/settings/teams/create-team.js 中找到初始化此组件的代码；您还会注意到，它只需要 Spark 的 /vendor 目录中的组件定义。换句话说，组件和表单定义存储在位于 /vendor/laravel/spark/resources/assets/js/settings/teams/create-form.js 的 Spark 供应商文件 中。你能看出 settings/teams/create-form.js 部分是相同的吗？这应该可以帮助您找到任何组件或表单的底层 JS 代码——只需搜索 Spark 的 JS 资产，最终它的文件夹结构将成为您的第二天性。

至于 SparkForm class，它是 helper class designed for working with form errors. Its definition is in vendor/laravel/spark/resources/assets/js/forms/form.js file, although I don't think you'll ever need to make any modifications to it; just follow Taylor's examples with forms using Axios, and you shouldn't have any problems with submissions or validation. Although for the later point, validation, I'd suggest using an external package，而不是默认的服务器端验证，但这里有点跑题了。

希望这对您有所帮助。

Laravel Spark 表单如何提交？

How Do Laravel Spark Forms Submit?

forms

laravel

vue.js

laravel-spark