我安装了 VueJS2 以便在 laravel 中使用。
从一个简单的测试设置开始，这是 app.blade.php
<!DOCTYPE html>
<html>
<head>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MEDIFAKTOR - @yield('title') </title>
<link rel="stylesheet" href="css/vendor.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
@include('layouts.navigation')
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Page wrapper -->
@include('layouts.topnavbar')
<!-- Main view -->
@yield('content')
<!-- Footer -->
@include('layouts.footer')
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
<script src="js/app.js" type="text/javascript"></script>
<script>
var data = {
message: 'Greetings your majesty'
};
new Vue({
el: '#app',
data: data
})
</script>
@section('scripts')
@show
</body>
</html>
这是我要显示的内容
index.blade.php
@extends('layouts.app')
@section('title', 'Main page')
@section('content')
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="text-center m-t-lg">
<h1>MEDIFAKTOR server</h1>
</div>
<div id="app">
<h1>{{message}}</h1>
</div>
</div>
</div>
</div>
@endsection
当我刷新时，出现错误:
ErrorException in 80e040fb5fff0b0cf766194784388a0cd255e6c9.php line 10: Use of undefined constant message - assumed 'message' (View: /home/vagrant/Development/Source/MFServer/resources/views/home/index.blade.php)
这对我来说听起来像是无法识别 VueJS。我是按照VueJS官网和laracasts.com安装的
我是不是放错地方了？
Package.json
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.14.0"
}
}
最佳答案
尝试在您的索引 Blade 中使用 @{{message}} 而不是 {{message}}。因为你的消息不是 php 变量它的 JS 框架变量。在变量前加上 @ 符号。
关于laravel - Laravel 中的 VueJS 设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41211936/