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 组件），但目前还不清楚

1. Team Creation javascript 源代码所在的位置，和/或 Spark 创建组件的位置
2. 如何将特定表单回溯到其 javascript

这里是经验丰富的程序员——刚接触 Spark，希望这对于经验丰富的 Spark 开发人员来说是简单/明显的。

Answer 1

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

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

至于SparkForm 类，它是helper class designed for working with form errors。它的定义在vendor/laravel/spark/resources/assets/js/forms/form.js 文件中，尽管我认为您不需要对其进行任何修改；只需按照 Taylor 的示例使用 Axios 的表单，提交或验证应该不会有任何问题。虽然对于后一点，验证，我建议使用external package，而不是默认使用服务器端验证，但这有点离题了。

希望这会有所帮助。