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 run watch console中显示的错误消息：

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}}时，它将编译，并且当我尝试console.log该消息时，npm无法再次编译。为什么会这样呢？完全感谢您的帮助。

Answer 1

Vue在<template>内只能有1个根元素

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

通常，您可以通过添加“包装器” div作为父母这个wrapper元素没有显示目的，就在那因此您的模板符合单根需求。

laravel vue js组件无法编译

1 个答案: