javascript - 一个找不到原因的错误？

Question

先上报错：

然后花了一早上，找到了罪魁祸首（不确定）：

<template v-if="paper.type == 'article'">
    <p class="content" v-html="paper.front"></p>
</template>
<template v-else>
    <p class="content">
        <p class="block" v-for="photo in paper.front">
            <p class="img" v-bind:style="{'background-image': 'url(' + photo.url + ')'}"></p>
            <p class="remark">➢ {{photo.remark}}</p>
        </p>
    </p>
</template>

注意if...else，如果去掉else，改成下面这样，就OK了：

<template v-if="paper.type == 'article'">
    <p class="content" v-html="paper.front"></p>
</template>
<template v-if="paper.type == 'photo'">
    <p class="content">
        <p class="block" v-for="photo in paper.front">
            <p class="img" v-bind:style="{'background-image': 'url(' + photo.url + ')'}"></p>
            <p class="remark">➢ {{photo.remark}}</p>
        </p>
    </p>
</template>

但是百思不得其解，报错的原因是什么？正常的原因又是什么？

Answer 1

template v-if和单纯的v-if指令是不同的。
https://cn.vuejs.org/v2/guide...

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。

升级最新的Vue.js可解决这个Bug,233333

Answer 2

试试不用 template

Answer 3

<template> 元素可以被当做包装元素，但是最终的渲染结果不会包含它。要切换模板可以使用动态组件<component>或者试试下面的方式：

<template>
    <p class="content" v-if="paper.type == 'article'" v-html="paper.front"></p>
    <p class="content" v-else>
        <p class="block" v-for="photo in paper.front">
            <p class="img" v-bind:style="{'background-image': 'url(' + photo.url + ')'}"></p>
            <p class="remark">➢ {{photo.remark}}</p>
        </p>
    </p>
</template>

Answer 4

@KingMario @不爱吃西红柿的鱼 @Lemo_Liu
统一回复下，按照 @Lemo_Liu 的方式，在不用template的情况下，依然报错，甚至连v-else改为并列v-if都没用了。