我在 Vuejs 中的组件没有在我的 Blade 视图中呈现

Posted 2023-02-23

【中文标题】我在 Vuejs 中的组件没有在我的 Blade 视图中呈现

【英文标题】：My component in Vuejs isn't rendering in my Blade View

【发布时间】：2018-11-05 08:22:33

【问题描述】：

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

我的组件被称为“星级”。

刀片视图

<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 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

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

【问题讨论】：

控制台有错误吗？

不，控制台没有显示错误，这就是为什么我很难找到错误

【参考方案1】：

1) 确保您使用

编译您在

app.js

中编写的脚本

npm run watch

命令。

2) 我没有看到任何具有 #app id 的 div 元素。你是说我会用

来定位

#app

元素

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

但你没有。试着说一下：

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

【讨论】：

我照你说的做了，现在给我这两个错误

看我的问题，我编辑了，写错了

你能不能在window.Vue = require('vue');之后写import Vue from 'vue'

我解决了它添加这个元标记

【参考方案2】：

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

1) 运行：npm run dev

2) 运行：npm run watch

现在可以了