VueJS Fehler kompilieren Vorlage

Ich habe gerade mein erstes Projekt mit VueJS und Vue-loader.

Also machte ich meine erste Komponente zu zeigen, eine einfache Nachricht, es funktioniert, wenn ich eine Nachricht, aber ich bekomme eine Fehlermeldung, wenn ich mehrere Nachrichten:

(Emitted value instead of an instance of Error) 
  Error compiling template:

  <message>This is a small message!</message>

  <message>Another one</message>

  - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

Dies ist mein code. Ich bin ganz neu hier und ich kann nicht herausfinden, was falsch ist.

App.vue

JS:

<template>
    <message>This is a small message!</message>

    <message>Another one</message>
</template>

<script>
    import Message from './Components/Message.vue';

    export default {
        name: 'app',

        components: {
            Message,
        },

        data () {
            return {

            }
        }
    }
</script>

Nachricht.Vue

JS:

<template>
    <div class="box">
        <p>
            <slot></slot>
        </p>
    </div>
</template>

<script>
    export default {

    }
</script>

<style>
    .box { background-color: #e3e3e3; padding: 10px; border: 1px solid #c5c5c5; margin-bottom: 1em;}
</style>

Ich hoffe, jemand kann helfen!

InformationsquelleAutor Nieck | 2017-04-22
Schreibe einen Kommentar