laravel Vue.js 2.0 无法编译模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40849885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js 2.0 failed to compile template
提问by Jenssen
I use webpack, vue.js 2.0and Laravel 5.3. Nothing goes wrong when I compile with gulp.
我使用webpack,vue.js 2.0和Laravel 5.3. 当我用 gulp 编译时没有任何问题。
But I get this error in the consolewhen I go to /homethat links to home.blade.php.
但我得到的这个错误console，当我去到/home那个链接home.blade.php。
Error:
错误：
vue.js?3de6:515 [Vue warn]: failed to compile template:
//my component
(found in root instance)
app.js
应用程序.js
require('./bootstrap');
Vue.component('CheckoutForm', require('./components/CheckoutForm.vue'));
const app = new Vue({
el: '#app'
});
app.blade.php
应用程序.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet">
<!-- Scripts -->
<script>
window.lnj = <?php echo json_encode([
'csrfToken' => csrf_token(),
'stripeKey' => config('services.stripe.key')
]); ?>
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ url('/login') }}">Login</a></li>
<li><a href="{{ url('/register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
@yield('content')
</div>
<!-- Scripts -->
<script src="https://checkout.stripe.com/checkout.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
home.blade.php
主页.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
<checkout-form :plans="{{ $plans }}"></checkout-form>
</div>
</div>
</div>
</div>
</div>
@endsection
package.json
包.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-14",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3"
}
}
checkoutForm.js (component)
checkoutForm.js（组件）
<template>
<form action="/subscriptions" method="POST">
<select name="plans" v-model="plan">
<option v-for="plan in plans" :value="plan.id">
{{ plan.plan }} — {{ plan.price / 100 }}
</option>
</select>
<button type="submit" @click.prevent="subscribe">Koop het hier!</button>
<p v-show="status" v-text="status"></p>
</form>
</template>
<script>
export default {
props: ['plans'],
data() {
return {
stripeEmail: '',
stripeToken: '',
status: false,
plan: 1
};
},
created() {
this.stripe = StripeCheckout.configure({
key: lnj.stripeKey,
locale: "auto",
panelLabel: "Subscribe For",
token: (token) => {
this.stripeToken = token.id;
this.stripeEmail = token.email;
this.$http.post('/subscriptions', this.$data)
.then(
response => alert("Success!"),
response => this.status = response.body.status
);
}
});
},
methods: {
subscribe() {
let plan = this.findPlanById(this.plan);
this.stripe.open({
'Name': plan.name,
'description': plan.description,
'zipCode': true,
'currency': "eur",
'amount': plan.price
});
},
findPlanById(id) {
return this.plans.find(plan => plan.id == id);
}
}
}
</script>
What could be the problem?
可能是什么问题呢？
采纳答案by GuyC
First ensure you haven't named your component checkoutForm.jswhen it should be checkoutForm.vueotherwise webpack will use the incorrect loaders.
首先确保你没有checkoutForm.js在应该命名你的组件时命名，checkoutForm.vue否则 webpack 将使用不正确的加载器。
Within your main app.jsyou need to rename your component to lowercase hyphenated:
在您的主app.js 中，您需要将组件重命名为小写连字符：
Vue.component('checkout-form' ...
Then you are setting this.stripeto an instance of StripeCheckout
然后你设置this.stripe为一个实例StripeCheckout
instead you should:
相反，您应该：
checkoutForm.js
结帐表格.js
data() {
return {
stripeEmail: '',
stripeToken: '',
status: false,
plan: 1
};
},
stripe: null,
created() {
this.$options.stripe = StripeCheckout.configure({
...
Then always reference this.$options.stripeotherwise Vue will try and make stripereactive
然后总是引用，this.$options.stripe否则 Vue 将尝试使stripe响应式
回答by Jetmir Haxhisefa
Make sure that the $plans is set (is not null) in your home.blade.php
确保 $plans 在您的 home.blade.php 中设置（不为空）
