请查看使用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)
我该如何修正这个错误?。代码是从教程中粘贴的。
1条答案
按热度按时间9udxz4iz1#
我认为在模板标签中,必须只有一个共享父节点。所以理想情况下这应该可以工作。请给予一下。