実装した新しいデザインに対応するために、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&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"> </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
誰かが私を正しい方向に向けることができれば、ここでどこが間違っているのか教えていただければ幸いです. ありがとう！