Мой компонент в Vuejs не отображается в моем Blade View - PullRequest
Новая
       14

Мой компонент в Vuejs не отображается в моем Blade View

0 голосов
/ 26 мая 2018

Мой компонент 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 я импортировал пакет для созданиясистема оценок.Если вы хотели бы видеть документы, это Звездный рейтинг системы 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 warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент?Для рекурсивных компонентов обязательно укажите опцию «name».

2) CSRF-токен не найден: https://laravel.com/docs/csrf#csrf-x-csrf-token

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

Решение моей проблемы было решено в два этапа:

1) run: npm run dev

2) run: npm run watch

Теперь все работает

0 голосов
/ 26 мая 2018

1) Убедитесь, что вы компилируете сценарий, который вы написали в app.js с помощью команды 

npm run watch

.

2) Я не вижу ни одного divэлемент, имеющий # app id.Вы говорите, что я нацеливаюсь на элемент # app с 

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

Но у вас его нет.Попробуйте поставить:

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

...