我是新 VueJS 学生!
我做了一个“MainTemplate.vue”,有菜单、页脚、页眉... 因此,创建另一个名为“ComponentB.vue”的.vue。
这是我的代码ComponentB.vue
<template>
<h1>Component B</h1>
</template>
就这么简单。我将其导入到我的“MainTemplate.vue”中并且运行良好。 但我不知道为什么如果这个模板“ComponentB.vue”有很多代码,它就不起作用。
看,我简单地向我的“ComponenteB.vue”添加更多代码
<template>
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
</template>
当我保存时,浏览器向我发送此错误:
client?cd17:139 ./~/vue-loader/lib/template-compiler?{"id":"data-v-4e4e09bc","hasScoped":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/ComponenteB.vue
(Emitted value instead of an instance of Error)
Error compiling template:
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
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.
@ ./src/ComponenteB.vue 6:2-198
@ ./src/routes.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
为什么我不能在里面放入更多代码?有人可以帮我吗?
非常感谢!!
最佳答案
它就在错误消息中:
Component template should contain exactly one root element
将 ComponentB.vue
模板的内容包装在 div 中,以便它具有一个根元素:
<template>
<div>
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
<h1>Component B</h1>
</div>
</template>
关于javascript - VueJS 2 模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46078555/