Question

我的Vuejs组件未在我的刀片视图中呈现。我究竟做错了什么？

我的组件名为＆＃34;星级＆＃34;。

刀片视图

<div class="container">
<div class="row">
    <div class="col-md-4">
        **<star-rating></star-rating>**
    </div>
    <div class="col-md-4">
        Rating - statistics
    </div>
    <div class="col-md-4">
        @if(auth()->check())
            <form method="post" action="{{ route('review.store') }}">
                {{ csrf_field() }}
                <h5>Form title</h5> 

                <div class="form-group">
                    <label for="headline"><strong>Headline</strong></label>
                    <input type="text" class="form-control" name="headline" id="headline" placeholder="Review title">
                </div>
                <div class="form-group">
                    <label for="headline"><strong>Rating</strong></label>
                    <input type="text" class="form-control" name="rating" id="rating" placeholder="A number from 1 - 5">
                </div>
                <div class="form-group">
                    <label for="headline"><strong>Description</strong></label>
                    <input type="text" class="form-control" name="description" id="description" placeholder="Tell us about your experience">
                </div>

                <input type="hidden" name="product_id" value="{{ $product->id }}">

                <button class="btn btn-primary" type="submit">Save</button>
            </form>
        @else
            <a href="/login" class="btn btn-primary" role="button">Write a review</a>
        @endif
    </div>
   </div>
 </div>
 <div class="container">
 <div class="row">
    <div class="col-md-6">
       <ul>
            @forelse($product->reviews as $review)
            <li>{{ $review->headline }}</li>
            @empty
                <h6>There are not reviews for this product</h6>
            @endforelse
       </ul>
    </div>
  </div>
</div>
@section('scripts')
  <script src="{{asset('js/app.js')}}"></script>
@endsection

在Vuejs中，我导入了用于创建评级系统的包。如果您想查看文档，请参阅Star Rating System Vuejs

Vuejs文件

import VueStarRating from 'vue-star-rating'

require('./bootstrap');

window.Vue = require('vue');


Vue.component('example-component', 
require('./components/ExampleComponent.vue'));

Vue.component('star-rating', VueStarRating);

const app = new Vue({
    el: '#app'
});

我收到了这两个错误：

1） [Vue警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请务必提供＆＃34; name＆＃34;选项。

2）未找到CSRF令牌：https://laravel.com/docs/csrf#csrf-x-csrf-token

Answer 1

1）确保您正在编译使用

app.js 编写的脚本

npm run watch

命令。

2）我没有看到任何具有 #app id的div元素。您说我将 #app 元素与

对齐

const app = new Vue({ <br>
    el: '#app' 
});

但你没有。试着说：

<div class="container" id="app">

Answer 2

我的问题的解决方案分两步解决：

1）运行：npm run dev

2）运行：npm run watch

现在，它有效

Vuejs中的我的组件在我的Blade View中无法渲染

2 个答案: