时间戳

首页 > 解决方案 > laravel vue js组件无法编译

laravel - laravel vue js组件无法编译

问题描述

我是 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 控制台中显示的错误消息：

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 无法再次编译。为什么会这样？感谢任何帮助。

标签： laravelvuejs2

解决方案

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

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

通常，您将通过添加“包装器”div 作为父级来解决此问题。此包装器元素没有显示目的，它只是在那里，因此您的模板符合单根要求。

推荐阅读