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

问题描述

问 题

先上报错：

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

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

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

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

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

解决方案

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

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

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

这篇关于javascript - 一个找不到原因的错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！