使用vue组件的多个元素时,vue.js程序出错

fbcarpbf  于 2023-02-05  发布在  Vue.js
关注(0)|答案(1)|浏览(134)

请查看使用vue create my-app创建的vuejs应用程序的src目录中的App.vue文件。这会在使用npm run serve提供的localhost:8080中引发错误:

    • 应用程序版本**
<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>

我在网页和控制台中收到以下错误:

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)

我该如何修正这个错误?。代码是从教程中粘贴的。

9udxz4iz

9udxz4iz1#

我认为在模板标签中,必须只有一个共享父节点。所以理想情况下这应该可以工作。请给予一下。

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

相关问题