Question

我是新的VueJS学生！

我制作了一个＆＃34; MainTemplate.vue ＆＃34;，有一个菜单，页脚，标题...... 所以创建另一个.vue名为＆＃34; ComponentB.vue ＆＃34;。

这是我的代码 ComponentB.vue

<template>  
    <h1>Component B</h1>
</template>

这么简单。我将此导入我的＆＃34; MainTemplate.vue ＆＃34;它运作良好。但我不知道为什么这个模板＆＃34; ComponentB.vue ＆＃34;有很多代码，它不会工作。

看，我简单地为我的＆＃34; ComponenteB.vue ＆＃34;

添加更多代码

<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

为什么我不能放入更多代码？有人可以帮我吗？

非常感谢!!

Answer 1

它就在错误信息中：

组件模板应该只包含一个根元素

将您的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>

VueJS 2模板

1 个答案: