Как отправлять искровые формы Laravel?

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. Где находится источник javascript Team Creation и / или где Spark создает компонент
2. Как я могу отследить, как конкретная форма для его JavaScript

Опытный программист здесь - просто новичок в Spark и надеется, что это просто / очевидно для опытного разработчика Spark.

Answer 1

Каждый <form> в Spark обычно обрабатывается компонентом 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 для любого компонента или формы - просто выполните поиск ресурсов JS Spark, и в конечном итоге его структура папок станет для вас второй натурой.

Для SparkForm класс, это вспомогательный класс, предназначенный для работы с ошибками формы. Его определение в vendor/laravel/spark/resources/assets/js/forms/form.js файл, хотя я не думаю, что вам когда-либо придется вносить в него какие-либо изменения; просто следуйте примерам Тейлора с формами, использующими Axios, и у вас не должно возникнуть проблем с отправкой или проверкой. Хотя для более позднего этапа, проверки, я бы предложил использовать внешний пакет, вместо того, чтобы по умолчанию использовать проверку на стороне сервера, но это немного не в тему.

Надеюсь это поможет.