0

我尝试在 Laravel Spark 中编辑默认注册表单，以适应我实施的新设计。但是，我在注册页面上遇到了一些问题，其中“v-if”不起作用并且所有页面组件都显示，如下所示：

图片： https ://i.gyazo.com/2b00ac14ec441649c9951ba3e216ed0e.png （不允许直接发布图片）。

这是我的布局刀片代码（resources/views/vendor/spark/layouts/guest.blade.php）：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Information -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Page Title -->
    <title>@yield('title', config('app.name'))</title>

    <!-- Material Design Icons  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Roboto Web Font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">

    <!-- MDK -->
    <link type="text/css" href="{{ asset('vendor/material-design-kit.css') }}" rel="stylesheet">

    <!-- Sidebar Collapse -->
    <link type="text/css" href="{{ asset('vendor/sidebar-collapse.min.css') }}" rel="stylesheet">

    <!-- App CSS -->
    <link type="text/css" href="{{ asset('css/style.min.css') }}" rel="stylesheet">

    <!-- Sweetalert CSS -->
    <link href="/css/sweetalert.css" rel="stylesheet">

    <!-- Extra Page Scripts -->
    @yield('scripts', '')

    <!-- Global Spark Object -->
    <script>
        window.Spark = <?php echo json_encode(array_merge(
            Spark::scriptVariables(), []
        )); ?>;
    </script>
</head>
<body class="@yield('body-class')">
    <div id="spark-app" v-cloak>
        <div class="row">
            <!-- Main Page Content -->
            @yield('content')
        </div>
    </div>

    <!-- jQuery -->
    <script src="{{ asset('vendor/jquery.min.js') }}"></script>

    <!-- Bootstrap -->
    <script src="{{ asset('vendor/tether.min.js') }}"></script>
    <script src="{{ asset('vendor/bootstrap.min.js') }}"></script>

    <!-- MDK -->
    <script src="{{ asset('vendor/dom-factory.js') }}"></script>
    <script src="{{ asset('vendor/material-design-kit.js') }}"></script>

    <!-- Sidebar Collapse -->
    <script src="{{ asset('vendor/sidebar-collapse.js') }}"></script>

    <!-- App JS -->
    <script src="{{ asset('js/main.min.js') }}"></script>

    <!-- Spark JS -->
    <script src="{{ mix('js/app.js') }}"></script>
    <script src="/js/sweetalert.min.js"></script>

</body>
</html>

这是注册页面本身的 Blade 代码（resources/views/vendor/spark/auth/register-spark.blade.php）：

@extends('spark::layouts.guest')

@section('title', 'Register')
@section('body-class', 'register')

@section('scripts')
    <script src="https://js.stripe.com/v2/"></script>
@endsection

@section('content')
<div class="row">
    <spark-register-stripe inline-template>
        <div class="col-sm-8 push-sm-1 col-md-4 push-md-3 col-lg-4 push-lg-4">

            <div class="text-xs-center m-2">
                <div class="icon-block rounded-circle">
                    <i class="material-icons md-36 text-muted">edit</i>
                </div>
            </div>

            <div align="center">
                <h1>Register</h1>
            </div>

            <br />

            <!-- Common Register Form Contents -->
            @include('spark::auth.register-common')

            <br />

            <!-- Billing Information -->
            <div class="card" v-if="selectedPlan && selectedPlan.price > 0">
                <div class="card-header bg-white text-xs-center">
                    <h4 class="card-title">Billing Information</h4>
                </div>
                <div class="p-2">
                    <!-- Generic 500 Level Error Message / Stripe Threw Exception -->
                    <div class="alert alert-danger" v-if="registerForm.errors.has('form')">
                        We had trouble validating your card. It's possible your card provider is preventing
                        us from charging the card. Please contact your card provider or customer support.
                    </div>

                    <form role="form">
                        <!-- Billing Address -->
                        @if (Spark::collectsBillingAddress())
                            @include('spark::auth.register-address')
                        @endif

                        <!-- Cardholder's Name -->
                        <div class="form-group">
                            <label for="name">Cardholder's Name</label>
                            <input type="text" class="form-control" name="name" id="name" placeholder="Cardholder's Name" v-model="cardForm.name">
                        </div>

                        <!-- Card Number -->
                        <div class="form-group">
                            <label for="number">Card Number</label>
                            <input type="text" class="form-control" name="number" id="number" placeholder="Card Number" data-stripe="number" v-model="cardForm.number">

                            <small class="text-help" v-show="registerForm.errors.has('number')">
                                @{{ registerForm.errors.get('number') }}
                            </small>
                        </div>

                        <!-- Security Code (CVC) -->
                        <div class="form-group">
                            <label for="cvc">Security Code (CVC)</label>
                            <input type="text" class="form-control" name="cvc" id="cvc" placeholder="Security Code (CVC)" data-stripe="cvc" v-model="cardForm.cvc">
                        </div>

                        <!-- Expiration -->
                        <div class="form-group">
                            <label>Card Expiration Date</label>

                            <div class="row">
                                <!-- Month -->
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="month" placeholder="Expiration Month (MM)" maxlength="2" data-stripe="exp-month" v-model="cardForm.month">
                                </div>

                                <!-- Year -->
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="year" placeholder="Expiration Year (YYYY)" maxlength="4" data-stripe="exp-year" v-model="cardForm.year">
                                </div>
                            </div>
                        </div>

                        <!-- ZIP/Postal Code -->
                        <div class="form-group" v-if=" ! spark.collectsBillingAddress">
                            <label for="zip">ZIP/Postal Code</label>
                            <input type="text" class="form-control" name="zip" id="zip" placeholder="ZIP/Postal Code" v-model="registerForm.zip">

                            <small class="text-help" v-show="registerForm.errors.has('zip')">
                                @{{ registerForm.errors.get('zip') }}
                            </small>
                        </div>

                        <!-- Coupon Code -->
                        <div class="form-group" v-if="query.coupon">
                            <label for="coupon">Coupon Code</label>
                            <input type="text" class="form-control" name="coupon" id="coupon" placeholder="Coupon Code" v-model="registerForm.coupon">

                            <small class="text-help" v-show="registerForm.errors.has('coupon')">
                                @{{ registerForm.errors.get('coupon') }}
                            </small>
                        </div>

                        <!-- Terms And Conditions -->
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" v-model="registerForm.terms">
                                    I Accept The <a href="/terms" target="_blank">Terms Of Service</a>

                                    <small class="text-help" v-show="registerForm.errors.has('terms')">
                                        @{{ registerForm.errors.get('terms') }}
                                    </small>
                                </label>
                            </div>
                        </div>

                        <!-- Tax / Price Information -->
                        <div class="form-group" v-if="spark.collectsEuropeanVat && countryCollectsVat && selectedPlan">
                            <label class="col-md-4 control-label">&nbsp;</label>

                            <div class="col-md-6">
                                <div class="alert alert-info" style="margin: 0;">
                                    <strong>Tax:</strong> @{{ taxAmount(selectedPlan) | currency }}
                                    <br><br>
                                    <strong>Total Price Including Tax:</strong>
                                    @{{ priceWithTax(selectedPlan) | currency }} / @{{ selectedPlan.interval | capitalize }}
                                </div>
                            </div>
                        </div>

                        <!-- Register Button -->
                        <div class="form-group" align="center">
                            <button type="submit" 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>Registering
                                </span>
                                <span v-else>
                                    <i class="fa fa-btn fa-check-circle"></i>Register
                                </span>
                            </button>
                        </div>

                        <div class="text-xs-center">Already signed up? <a href="guest-login.html">Log in</a></div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Plan Features Modal -->
        @include('spark::modals.plan-details')
    </spark-register-stripe>
</div>
@endsection

如果有人能指出我正确的方向，并让我知道我在哪里出错，我将不胜感激。谢谢！

4

0 回答 0