CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Dolphin
Dolphin

Reputation: 39135

If you are using v-if on multiple elements, use v-else-if to chain them instead after upgrade to vue 2.x

Today when I upgrade Vue to 2.x, shows error like this:

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>)

this is the tpl.html source code looks like:

<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>

Why did this happen? What should I do to fix this problem?

Upvotes: 1

Views: 865

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23510

Like error said, wrap everything in one div, so try to move <st-box v-ref:st></st-box> inside <section block

Upvotes: 1

Related Questions