I get an error when try hello world in Vue-CodePudding

I got this error :

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.

When try :

<template>
    <h1>Il tuo oroscopo</h1>
    <h3>{{ msg }}</h3>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello World!'
        }
    }
}
</script>

<style scoped></style>

CodePudding user response：

You have to put a div in root. Only one.

<template>
<div>
    <h1>Il tuo oroscopo</h1>
    <h3>{{ msg }}</h3>
</div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello World!'
        }
    }
}
</script>

<style scoped></style>

CodePudding user response：

As error says itself Component template should contain exactly one root element.

This means, wrapped the template content with in a single element which will be work as a root element. Hence, wrapping with a <div> will resolve this error.

Demo :

Vue.component('child', {
  props: ['childmsg'],
  template: `<div><h1>Il tuo oroscopo</h1>
                     <h3>{{ childmsg }}</h3></div>`
});

var app = new Vue({
  el: '#app',
  data: {
        msg: 'Hello World!'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child :childmsg="msg">
  </child>
</div>