VueJSとVue-loaderを使って最初のプロジェクトを作成しました。
簡単なメッセージを表示する最初のコンポーネントを作成しました。1つのメッセージを作成すると正常に機能しますが、複数のメッセージを作成するとエラーが発生します。
(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.
これは私のコードです。私はこれにとても慣れていないので、何が悪いのかわかりません。
App.vue
<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>
Message.Vue
<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>
誰かが助けてくれることを願っています!
エラーは一目瞭然です。各コンポーネントには1つのルート要素のみが必要です。したがって、すべてをdivにパックします。
<template>
<div>
<message>This is a small message!</message>
<message>Another one</message>
</div>
</template>