Vuejs 和 laravel - 模板应该只负责映射 UI 的状态
Posted
技术标签:
【中文标题】Vuejs 和 laravel - 模板应该只负责映射 UI 的状态【英文标题】：Vuejs and laravel - Template should only be responsible for mapping the state of the UI 【发布时间】：2019-03-19 04:04:41 【问题描述】：在我的项目的某些部分，我当然在刀片模板中有一些 vuejs 内容。但它给了我这个错误：“模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如，因为它们不会被解析。”
vue-laravel-stripe
我的 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
注意事项： 我已将脚本外部更改为主体标签内部，反之亦然，没有，检查了标签，没有任何内容
【问题讨论】：
【参考方案1】：这个库正在将脚本注入到您的表单中。可以看逻辑at this line
它会循环你的脚本以确定你是否从外部加载库，如果不是，它会将它附加到你的表单中：
if(!scriptExists)
document.querySelector("#"+this.formId).appendChild(el);
所以解决的方法就是自己简单的将其包含在页面中：
<script src="https://checkout.stripe.com/checkout.js"></script>
这将阻止它将脚本注入到表单中，并阻止 VNODE 抱怨其中存在<script></script> 标签。
【讨论】：
【参考方案2】：对于许多用户来说，这是由于他们没有正确关闭所有 HTML 标记。 它为我和其他许多人做了诀窍： https://github.com/vuejs/vue-loader/issues/302
【讨论】：
以上是关于Vuejs 和 laravel - 模板应该只负责映射 UI 的状态的主要内容，如果未能解决你的问题，请参考以下文章
vue Dynamic Slot Names 错误模板应该只负责将状态映射到 UI
如何将带参数的 Laravel 模型函数调用到 Vuejs 模板中？