Question

我正在尝试在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

注释控制器（仅索引方法）

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预先捆绑在一起。有人可以告诉我为什么我必须这样做吗？

Answer 1

@yield('scripts')

它应该位于您的#app div标签下方，而不是位于其中。如果要在CDN中嵌入vue，请确保使用custom.js在代码的最底部进行

使用Vue.js构建评论系统时，未定义Laravel 5.8 Vue错误

1 个答案: