Я пытаюсь создать систему комментариев с Vue.js в моем приложении Laravel.Кажется, я не могу заставить Vue работать, и я продолжаю получать ошибку «Vue notfined» в моей консоли.У кого-нибудь есть мысли о том, почему это может быть?Мой код ниже.
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
Контроллер комментариев (просто метод индексации)
public function index(Recipe $recipe)
{
return response()->json(
$recipe->comments()->with('user')->latest()->get()
);
}
Routes / api.php file
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, хотя.Может кто-нибудь сказать мне, почему я должен был это сделать?