vue--The template root requires exactly one element.的解决办法

 vue--The template root requires exactly one element.的解决办法

[vue/valid-template-root]
The template root requires exactly one element.eslint-plugin-vue
Peek Problem
No quick fixes available

在vue中会出现以上问题

这是因为vue的模版中只有能一个根节点，所以在<template>中插入第二个元素就会报错

解决方案：

将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了，可以参考以下示例：

<template>
  <div id="vue">
    Hello Vue.js!{{message}}
    <span>{{message1}}</span>
    <span v-if="seen">你看到我啦！</span>
     <div id="app-4">
       <ol>
         <li v-for="todo in todos"  v-bind:key="todo">
           {{ todo.text }}
         </li>
       </ol>
     </div>
  </div>
</template>