我正在尝试在 Laravel 应用程序中使用 Vue.js 构建评论系统。我似乎无法让 Vue 工作，并且控制台中不断出现“Vue 未定义”错误。有人对为什么会这样有任何想法吗？我的代码如下。
show.blade(我想要渲染 Vue 的地方)
<div class="col-12 currentComments">
<hr>
<div id="" v-for="comment in comments">
<p><a href="">@{{comment.user.name}}</a></p>
<p class="comment">@{{comment.body}}</p>
<span style="color: #aaa;">on @{{comment.created_at}}</span>
<button class="deleteComment" data-token="{{ csrf_token() }}">Delete Comment</button>
</div>
</div>
脚本位于我的 show.blade 文件底部
@section('scripts')
<script>
const app = new Vue({
el: '#app',
data: {
comments: {},
commentsBox: '',
recipe: {!! $recipe->toJson() !!},
user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!}
},
mounted() {
this.getComments();
},
methods: {
getComments() {
axios.get('/api/recipes/' + this.recipe.id + '/comments')
.then((response) => {
this.comments = response.data
})
.catch(function (error) {
console.log(error);
}
);
},
postComments() {
axios.post('/api/recipes/' + this.recipe.id + '/comment', {
api_token: this.user.api_token,
body: this.commentBox
})
.then((response) => {
this.comments.unshift(response.data);
this.commentBox = '';
})
.catch((error) => {
console.log(error);
})
}
}
})
</script>
@endsection
评论 Controller (仅索引方法)
public function index(Recipe $recipe)
{
return response()->json(
$recipe->comments()->with('user')->latest()->get()
);
}
Routes/api.php 文件
Route::get('/recipes/{id}/comments', 'CommentsController@index');
布局文件
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- CSS -->
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<link rel="stylesheet" href="{{asset('css/main.css')}}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="{{asset('css/select2.min.css')}}">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito|Raleway" rel="stylesheet">
<!-- JavaScript -->
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<title>Plant Lab</title>
</head>
<body>
<div id="app">
@include('includes.messages')
@yield('jumbotron')
@yield('content')
@yield('scripts')
</div>
<script src="{{asset('js/custom.js')}}"></script>
<script src="{{asset('js/select2.min.js')}}"></script>
</body>
</html>
请帮忙。我不明白这个 谢谢!
更新
我必须将 CDN 拉入我的布局文件才能使其正常工作。不过 Laravel 应该与 Vue.js 预捆绑。有人能告诉我为什么我必须这样做吗？
最佳答案
@yield('scripts')
这应该位于 #app div 标签下方，而不是在其中。如果您要将 vue 嵌入 CDN，请确保您在代码的最底部使用 custom.js 执行此操作
关于javascript - 使用 Vue.js 构建评论系统时 Laravel 5.8 Vue is not Defined 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55910006/