【发布时间】：2019-03-19 04:04:41
【问题描述】：
在我的项目的某些部分，我当然在刀片模板中有一些 vuejs 内容。但它给了我这个错误：“模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如，因为它们不会被解析。”
我的 app.js：
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
import StripeForm from './components/StripeForm';
Vue.component('stripe-form', StripeForm);
const app = new Vue({
el: '#app'
});
我的 app.blade 模板：
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slabo+27px">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
@stack('styles')
</head>
<body>
@include('partials.navigation')
@yield('jumbotron')
<div id="app">
<main class="py-4">
@if(session('message'))
<div class="row justify-content-center">
<div class="col-md-10">
<div class="alert alert-{{session('message')[0]}}">
<h4 class="alert-heading">
{{ __("Mensaje informativo") }}
</h4>
<p>{{session('message')[1]}}</p>
</div>
</div>
</div>
@endif
@yield('content')
</main>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
这是我的 vue 组件：
<template>
<stripe-checkout
button="Suscribirme"
buttonClass="btn btn-course"
:stripe-key="stripe_key"
:product="product"
>
</stripe-checkout>
</template>
<script>
import {StripeCheckout} from 'vue-stripe';
export default {
components: {
StripeCheckout
},
// name: "stripe-form",
props: {
stripe_key: '',
name: '',
amount: '',
description: ''
},
computed: {
product() {
return {
name: this.name,
amount: parseFloat(this.amount),
description: this.description
}
}
}
}
</script>
这是我将它作为我的部分之一的地方：
<form action="{{ route('subscriptions.process_subscription') }}" method="POST">
@csrf
<input
class="form-control"
name="coupon"
placeholder="{{ __("¿Tienes un cupón?") }}"
/>
<input type="hidden" name="type" value="{{ $product['type'] }}"/>
<hr/>
<stripe-form
stripe_key="{{ env('STRIPE_KEY') }}"
name="{{ $product['name'] }}"
amount="{{ $product['amount'] }}"
description="{{ $product['description'] }}"
></stripe-form>
</form>
在这里我将它包含在一个模板中：
@extends('layouts.app')
@push('styles')
<link rel="stylesheet" href="{{ asset('css/pricing.css') }}">
@endpush
@section('jumbotron')
@include('partials.jumbotron', [
'title' => __("Subscríbete ahora a uno de nuestros planes"),
'icon' => 'globe'
])
@endsection
@section('content')
<div class="container">
<div class="pricing-table pricing-three-column row">
<div class="plan col-sm-4 col-lg-4">
<div class="plan-name-bronze">
<h2>{{ __("MENSUAL") }}</h2>
<span>{{ __(":price / Mes", ['price' => '€ 9,99']) }}</span>
</div>
<ul>
<li class="plan-feature">{{ __("Acceso a todos los cursos") }}</li>
<li class="plan-feature">{{ __("Acceso a todos los archivos") }}</li>
<li class="plan-feature">
@include('partials.stripe.form', [
"product" => [
"name" => __("Suscripción"),
"description" => __("Mensual"),
"type" => "monthly",
"amount" => 999,99
]
])
</li>
</ul>
</div>
<div class="plan col-sm-4 col-lg-4">
<div class="plan-name-silver">
<h2>{{ __("Trimestral") }}</h2>
<span>{{ __(":price / 3 meses", ['price' => '€ 19,99']) }}</span>
</div>
<ul>
<li class="plan-feature">{{ __("Acceso a todos los cursos") }}</li>
<li class="plan-feature">{{ __("Acceso a todos los archivos") }}</li>
<li class="plan-feature">
@include('partials.stripe.form',
["product" => [
'name' => 'Suscripción',
'description' => 'Trimestral',
'type' => 'quarterly',
'amount' => 1999.99
]]
)
</li>
</ul>
</div>
<div class="plan col-sm-4 col-lg-4">
<div class="plan-name-gold">
<h2>{{ __("ANUAL") }}</h2>
<span>{{ __(":price / 12 meses", ['price' => '€ 89,99']) }}</span>
</div>
<ul>
<li class="plan-feature">{{ __("Acceso a todos los cursos") }}</li>
<li class="plan-feature">{{ __("Acceso a todos los archivos") }}</li>
<li class="plan-feature">
@include('partials.stripe.form',
["product" => [
'name' => 'Suscripción',
'description' => 'Anual',
'type' => 'yearly',
'amount' => 8999.99
]]
)
</li>
</ul>
</div>
</div>
</div>
@endsection
注意事项： 我已将脚本外部更改为主体标签内部，反之亦然，没有，检查了标签，没有任何内容
【问题讨论】：
标签： laravel-5 vue.js stripe-payments