如果您在多个元素上使用v-If，请在升级到vue2.x后使用v-else-If来链接它们

Question

今天当我将Vue升级到2.x时，显示如下错误：

commons1.js:23487 [Vue warn]: Error 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.
6  |      划词翻译没有权限操作当前网页
7  |    </div>
8  |  </section>
|             
9  |  <st-box v-ref:st></st-box>
|  ^^^^^^^^^^^^^^^^^^^^^^^^^^
10 |  
(found in <Root>)

这是tpl.html源代码的样子：

<section class="text-center functions">
<div v-if="canInject">
<div role="button" @click="switchEnable" :title="'点击切换为'+(enabled?'禁':'启')+'用状态'">已对当前网站<span v-if="enabled">启用</span><span v-else>禁用</span></div>
</div>
<div v-else>
划词翻译没有权限操作当前网页
</div>
</section>
<st-box v-ref:st></st-box>

为什么会发生这种情况？我应该怎么做才能解决这个问题？

Answer 1

正如error所说，将所有内容都封装在一个div中，因此尝试将<st-box v-ref:st></st-box>移动到<section块中