There's some part of my project where i have some vuejs content inside of a blade template of course. But it gives me this error: " Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed."
My 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'
});
My app.blade template:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="">
<title></title>
<!-- Scripts -->
<script src="" 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="" 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-">
<h4 class="alert-heading">
</h4>
<p></p>
</div>
</div>
</div>
@endif
@yield('content')
</main>
</div>
<script src=""></script>
</body>
</html>
Here's my vue-component:
<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>
Here's where i have it as one of my partials:
<form action="" method="POST">
@csrf
<input
class="form-control"
name="coupon"
placeholder=""
/>
<input type="hidden" name="type" value=""/>
<hr/>
<stripe-form
stripe_key=""
name=""
amount=""
description=""
></stripe-form>
</form>
And here i include it on a template:
@extends('layouts.app')
@push('styles')
<link rel="stylesheet" href="">
@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></h2>
<span></span>
</div>
<ul>
<li class="plan-feature"></li>
<li class="plan-feature"></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></h2>
<span></span>
</div>
<ul>
<li class="plan-feature"></li>
<li class="plan-feature"></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></h2>
<span></span>
</div>
<ul>
<li class="plan-feature"></li>
<li class="plan-feature"></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
Notes: I've changed the script outside to inside the body tag and the opposite, and nothing, checked the tags and nothing
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire