Компонент laravel vue js не может быть скомпилирован

Question

Я новичок в Laravel-VUE и нахожусь в процессе обучения.Буду признателен за любую помощь.Laravel поставляется с VUE, все компоненты Vue зарегистрированы в файле app.js следующим образом:

require('./bootstrap');
window.Vue = require('vue');

Vue.component('apnavbar-component', require('./components/APnavbarComponent.vue'));
Vue.component('group-component', require('./components/GroupComponent.vue'));
Vue.component('product-component', require('./components/ProductComponent.vue'));

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

В home.blade.php у меня есть это:

@extends('layouts.app')
@section('content')
<apnavbar-component></apnavbar-component>
<group-component></group-component>
<product-component></product-component>
@endsection

В APnavbarComponent.vue У меня есть это:

<template>
<h1>ap navbar component</h1>
<h3>{{ message }}</h3>
</template>
<script>
export default {
    data() {
        return {
            message: 'test message'
        }
    },
    mounted() {
        console.log("apnavbarcomponent mounted");
    }
}
</script>

это сообщение об ошибке, отображаемое в консоли просмотра npm:

ERROR in ./node_modules/vue-loader/lib/template-compiler?
{"id":"data-v-b62d55fa","hasScoped":false,"buble":
{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js? 
type=template&index=0!./resources/js/components/APnavbarComponent.vue
(Emitted value instead of an instance of Error)
  Error compiling template:

  <h1>ap navbar component</h1>
  { message }

  - text "{ message }" outside root element will be ignored.

npm не может скомпилировать это, и когда я удаляю {{message}},он компилируется, и когда я пытаюсь утешить сообщение, npm снова не компилируется.Почему это так?Ценю любую помощь на всех.

Answer 1

Vue может иметь только 1 корневой элемент внутри <template>

https://vuejsdevelopers.com/2018/09/11/vue-multiple-root-fragments/

Как правило, вы решите эту проблему, добавив div-обертку какродитель.Этот элемент-обертка не имеет предназначения для отображения, он просто присутствует, поэтому ваш шаблон соответствует требованию для одного пользователя.