I am facing an unusual issue with my Vue component. It seems that the component is not rendering properly (the output is <!---->), and my IDE is indicating an invalid end of the component, even though the tags are correctly balanced.
Here is the code for the entire component, which is quite 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);
},
computed: {
},
methods: {
}
}
</script>
The error reported by my IDE (VS Code) is:
[vue/no-parsing-error]
Parsing error: x-invalid-end-tag.eslint-plugin-vue
Upon investigation, I found that the issue lies in these lines of code:
<template v-if="activity.icon">
<div class="col-md-8">
</template>
<template v-else>
<div class="col">
</template>
Removing this block resolves the problem. What could be causing this discrepancy?