Question

我正在扩展laravel spark并希望在实际发送之前尝试验证注册。

从服务器上很好地正确处理所有数据，但不会弹出错误。

用于验证的代码如下：

module.exports = {
    ...
    methods: {
        ...
        validate(field, value) {
            var formData = {
                field: field,
                value: value
            };

            var form = new SparkForm(formData);

            Spark.post('/register_validate', form).then(response => {
                this.registerForm.addSuccess(field);
            }).catch(errors => {
                this.registerForm.addError(field, errors[field]);
            });
        }
    }
};

之后，我扩展了SparkForm并添加了这些方法（成功只是一个错误的副本，用于显示验证成功消息）：

/**
 * SparkForm helper class. Used to set common properties on all forms.
 */
window.SparkForm = function (data) {
    ...

    this.addError = function(field, errors) {
        form.successes.remove(field);
        form.errors.add(field, errors);
    },

    this.addSuccess = function(field) {
        form.errors.remove(field);
        form.successes.add(field, true);
    }
};

最后我在SparkFormErrors上添加了一些方法。

/**
 * Spark form error collection class.
 */
window.SparkFormErrors = function () {
    ...

    this.add = function(field, errors) {
        this.errors[field] = errors;
    };

    this.remove = function(field) {
        delete this.errors[field];
    }
};

在控制台中没有显示错误，在网络选项卡中我可以看到正确的消息成立，当我添加控制台登录时，例如响应回调，我可以看到实际的错误或成功消息。但它们并没有在屏幕上绘制。

为了完整性，我将包含模板刀片文件的重要内容：

@extends('spark::layouts.app')
@section('content')
  <spark-register-stripe inline-template>
    <!-- Basic Profile -->
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
          <div class="panel-heading">
            {{ trans('auth.register.title') }}
          </div>
          <div class="panel-body">
            <!-- Generic Error Message -->
            <div class="alert alert-danger" v-if="registerForm.errors.has('form')">
              @{{ registerForm.errors.get('form') }}
            </div>
            <!-- Registration Form -->
            <form class="form-horizontal" role="form">
              <!-- Name -->
              <div class="form-group" :class="{'has-error': registerForm.errors.has('name')}">
                <label class="col-md-4 control-label">{{ trans('user.name') }}</label>
                <div class="col-md-6">
                  <input type="name" class="form-control" name="name" v-model="registerForm.name" autofocus @blur="validate('name', registerForm.name)">
                  <span class="help-block" v-show="registerForm.errors.has('name')">
                    @{{ registerForm.errors.get('name') }}
                  </span>
                </div>
              </div>
              <!-- E-Mail Address -->
                <div class="form-group" :class="{'has-error': registerForm.errors.has('email')}">
                  <label class="col-md-4 control-label">{{ trans('user.email') }}</label>
                  <div class="col-md-6">
                    <input type="email" class="form-control" name="email" v-model="registerForm.email" @blur="validate('email', registerForm.email)">
                    <span class="help-block" v-show="registerForm.errors.has('email')">
                      @{{ registerForm.errors.get('email') }}
                    </span>
                  </div>
                </div>
                <!-- Password -->
                <div class="form-group" :class="{'has-error': registerForm.errors.has('password')}">
                  <label class="col-md-4 control-label">{{ trans('user.password') }}</label>
                  <div class="col-md-6">
                    <input type="password" class="form-control" name="password" v-model="registerForm.password" @blur="validate('password', registerForm.password)">
                    <span class="help-block" v-show="registerForm.errors.has('password')">
                      @{{ registerForm.errors.get('password') }}
                    </span>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-6 col-md-offset-4">
                    <button class="btn btn-primary" @click.prevent="register" :disabled="registerForm.busy">
                      <span v-if="registerForm.busy">
                        <i class="fa fa-btn fa-spinner fa-spin"></i>{{ trans('auth.register.submitting') }}
                      </span>
                      <span v-else>
                        <i class="fa fa-btn fa-check-circle"></i>{{ trans('auth.register.submit') }}
                      </span>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </spark-register-stripe>
@endsection

任何聪明的头脑都能看到我失踪/遗忘的东西？

更改子对象时，Vue.js不更新模板

0 个答案: