I am encountering some strange behaviour. My Vue ponent is not being rendered (output is <!---->), and my IDE is plaining of invalid end of ponent as though my tags aren't balanced... but they are.

Below is the entire ponent, it's pretty straightforward:

<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);
        },

        puted: {
        },

        methods: {
        }
    }
</script>

The error from my IDE (VS Code) is:

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

I've narrowed the problem down to these lines:

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

Removing this block fixes the issue. What am I missing?

I am encountering some strange behaviour. My Vue ponent is not being rendered (output is <!---->), and my IDE is plaining of invalid end of ponent as though my tags aren't balanced... but they are.

Below is the entire ponent, it's pretty straightforward:

<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);
        },

        puted: {
        },

        methods: {
        }
    }
</script>

The error from my IDE (VS Code) is:

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

I've narrowed the problem down to these lines:

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

Removing this block fixes the issue. What am I missing?

• javascript
• vue.js

2 Answers 2

I see what you are trying to do, instead I suggest replacing the div with this

<div :class="activity.icon ? 'col-md-8' : 'col'">

Try closing the div tags:

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