Etiqueta de cierre no válida en el componente Vue cuando todas las etiquetas están equilibradas

0

Me encuentro con un comportamiento extraño. Mi componente de Vue no se está procesando (la salida es <!---->), y mi IDE se queja de un final de componente no válido como si mis etiquetas no estuvieran balanceadas ... pero lo están.

A continuación se muestra el componente completo, es bastante sencillo:

<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>

El error de mi IDE (código VS) es:

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

He reducido el problema a estas líneas:

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

Eliminar este bloque soluciona el problema. ¿Qué me estoy perdiendo?

1

Veo lo que está tratando de hacer, en su lugar, sugiero reemplazar el div con esto

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

Intente cerrar las divetiquetas:

    <template v-if="activity.icon">
        <div class="col-md-8"></div>
    </template>
    <template v-else>
        <div class="col"></div>
    </template>
2
  • Pero encapsulan las etiquetas a continuación, solo quiero abrir una etiqueta diferente dependiendo de activity.icon
    Mike
    7 de enero a las 19:51
  • Honestamente, deberías copiar todo. Recibe este error porque tiene dos divetiquetas abiertas y solo una la cierra. 7 de ene a las 19:54