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.

转自:https://www.cnblogs.com/liziyou/p/6708537.html

vue菜鸟一枚,下载github上的代码来框架和思路,添加自己新的代码调试的时候,发现了一个错误,,具体报错如:

1
2
3
4
5
6
7
8
9
10
11
12
error   in  ./src/components/page/Test.vue
 
(Emitted value instead of an instance of Error)
   Vue template syntax error:
 
   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/components/page/Test.vue 5:2-167
  @ ./src/router/index.js
  @ ./src/main.js
  @ multi ./build/dev-client babel-polyfill ./src/main.js

 刚开始这样写得时候是没有发现啥错误的,我只是在后面添加一个<div></div>或是加了别的就说出现这个错误

1
2
3
<template>
     <el-button type= "primary" >{{test1}}</el-button>
</template>

  原来vue模板只能有一个根对象

所以你想要出现正常的效果,你的用一个div来或是别的标签来包裹全部的元素

正确的写法就是:

1
2
3
4
5
6
7
8
<template>
     <div>
         <el-button type= "primary" >haha1</el-button>
         <div>hahhaa</div>
         <el-input type= "text"  placeholder= "测试一下" ></el-input>
         <h1>{{test1}}</h1>
     </div>
</template>

猜你喜欢

转载自www.cnblogs.com/sharpest/p/10448069.html