javascript - 当所有标签都平衡时，Vue组件中的结束标签无效

问题描述

我遇到了一些奇怪的行为。我的 Vue 组件没有被渲染（输出是），我的 IDE 抱怨组件的无效结束，好像我的标签不平衡......但它们是。

下面是整个组件，它非常简单：

<template>    
    <div class="card activity">
        <div class="card-body">
            <div class="row">
            <template v-if="activity.icon">
                <div class="col-md-4">
                    <div class="icon">
                        <template v-if="activity.icon_type == 'font-awesome'">
                            <i :class="activity.icon"></i>
                        </template>
                    </div>
                </div>            
            </template>
            
            <template v-if="activity.icon">
                <div class="col-md-8">
            </template>
            <template v-else>
                <div class="col">
            </template>
            
                    <h2 v-html="activity.title"></h2>

                    <template v-if="activity.description">
                        <p v-html="activity.description"></p>
                    </template>

                    <template v-if="activity.link">
                        <a :href="activity.link" class="btn btn-primary">{{ activity.link_text ? activity.link_text : 'Read More' }}</a>
                    </template>
                </div>
            </div>
        </div>
    </div>    
</template>

<script>
    export default {
        props: {
            activity: {
                type: Object,
                required: true
            },
        },

        data() {
            return {};
        },

        mounted() {
            console.log(this.activity);
        },

        computed: {
        },

        methods: {
        }
    }
</script>

我的 IDE（VS 代码）的错误是：

[vue/no-parsing-error]
Parsing error: x-invalid-end-tag.eslint-plugin-vue

我已将问题缩小到以下几行：

<template v-if="activity.icon">
    <div class="col-md-8">
</template>
<template v-else>
    <div class="col">
</template>

删除此块可解决此问题。我错过了什么？

标签： javascriptvue.js

javascript - 当所有标签都平衡时，Vue组件中的结束标签无效

问题描述

解决方案

推荐阅读