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

<form>Spark 中的每一个通常都由包含其定义的 Vue.js 组件处理，尽管它们没有action或method属性，但它们确实具有特殊的 Vue 指令，例如@submit（或者@click如果它是 a <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类，它是一个设计用于处理表单错误的帮助类。它的定义在vendor/laravel/spark/resources/assets/js/forms/form.js文件中，尽管我认为您永远不需要对其进行任何修改；只需按照 Taylor 的示例使用 Axios 进行表单操作，提交或验证就不会有任何问题。虽然对于后面的验证，我建议使用外部包，而不是默认为服务器端验证，但这在这里有点偏离主题。

希望这可以帮助。