Error in vue.js program when using multiple elements using vue components-CodePudding

Please see my App.vue file inside src directory of vuejs application created using vue create my-app. This raises error in my localhost:8080 served using npm run serve:

App.vue

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    onInput(e) {
      this.text = e.target.value
    }
  }
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

I get the following errors in my webpage and console:

Compiled with problems:X

ERROR in ./src/App.vue?vue&type=template&id=7ba5bd90& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=template&id=7ba5bd90&)

Module Error (from ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  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.

  1  |  
  2  |  <input :value="text" @input="onInput" placeholder="Type here">
     |                                                                 
  3  |  <p>{{ text }}</p>
     |  ^^^^^^^^^^^^^^^^^
  4  |  


ERROR

[eslint] 
/home/cdit/my-app/src/App.vue
  18:3  error  The template root requires exactly one element  vue/no-multiple-template-root

✖ 1 problem (1 error, 0 warnings)

how can I fix this error? . The code is pasted from a tutorial.

CodePudding user response：

I think inside the template tag ,there must only be one shared parent. So ideally this should work. Please give it a try.

<template>
 <div>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
 </div>
</template>