es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Analizando Markdown utilizando Marked en Laravel 8 y VueJS 2.

07 Jun, 2023 Programación

Me pregunto si puedes ayudarme en algo.

Estoy intentando construir un foro usando Laravel 8 y VueJS, sin embargo, he llegado a un callejón sin salida donde el complemento Marked no parece estar funcionando.

No convierte el markdown a html, creo que lo estoy usando correctamente, pero puedo estar equivocado.

A continuación se muestra el código de mi componente Vue.

<template>
    <v-card elevation="2" outlined="" shaped="">
        <v-container fluid="">
            <v-card-title>
                {{data.title}}
            </v-card-title>
            <v-card-subtitle>
                Publicado por {{data.user}} {{data.created_at}}
            </v-card-subtitle>
            <v-spacer></v-spacer>
            <v-card-text v-html="data.body"></v-card-text>
        </v-container>
    </v-card>
</template>

<script>
import marked from 'marked';

export default {
    props:['data'],
    computed:{
        body(){
            return marked.parse(this.data.body);
        }
    }

}
</script>

<style>

</style>

He intentado definirlo como una importación global, sin embargo, aún no funciona.

Todavía muestra el markdown en lugar de convertirlo a html.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hola,

    Estaría encantado de ayudarte con el problema que estás teniendo con el plugin Marked en tu proyecto de foro Laravel 8 y VueJS.

    Por el código que has compartido, parece que estás intentando analizar el markdown utilizando el método marked.parse (), lo cual no es correcto. En su lugar, deberías usar la función marked() para convertir el markdown a HTML.

    Así es como puedes actualizar el código de tu componente:

    <template>
    <v-card     elevation="2"     outlined=""     shaped="">
<v-container fluid="">
<v-card-title>
    {{data.title}}
</v-card-title>
<v-card-subtitle>
    Publicado por {{data.user}} {{data.created_at}}
</v-card-subtitle>
<v-spacer> 
<v-card-text v-html="body"> </v-card-text>
</v-spacer></v-container>
    
</v-card></template>

<script>
import marked from 'marked';

export default {
    props: ['data'],
    calculated: {
        cuerpo () {
            return marcado (este.data.body);
        }
    }

}
</script>

<estilo>

</estilo>

    Ten en cuenta que hemos usado marked(this.data.body) en lugar de marked.parse(this.data.body).

    Prueba esto y hazme saber si te funciona. Si tienes alguna otra pregunta o problema, no dudes en preguntar.

    ¡Saludos cordiales!

Comments are closed.