3

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 开发人员来说是简单/明显的。

4

1 回答 1

6

Spark 中的每个<form>通常由包含其定义的 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 的表单，提交或验证应该不会有任何问题。尽管对于后一点，验证，我建议使用外部包，而不是默认使用服务器端验证，但这有点离题了。

希望这可以帮助。

于 2017-04-25T02:38:00.477 回答