Parsing Markdown using Marked in Laravel 8 and VueJS 2-CodePudding

I wonder if you are able to help me at all.

I'm attempting to build a forum using Laravel 8 and VueJS, however I've hit a brick wall where the Marked plugin doesn't seem to be working.

It does not convert the markdown to html, I think i'm using it correctly, but I may be wrong.

My Vue Component code is below

<template>
    <v-card
  elevation="2"
  outlined
  shaped
>
<v-container fluid>
<v-card-title>
    {{data.title}}
</v-card-title>
<v-card-subtitle>
    Posted By {{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>

I have tried defining it as a global import, however it still does not work.

It still displays the markdown instead of converting to html.

CodePudding user response：

Replace this line:

<v-card-text v-html="data.body"></v-card-text>

with:

<v-card-text v-html="body"></v-card-text>

In your code, you are using data, which is the raw prop. But what you really want is to use the computed value body, which calls Marked.

You should avoid using properties with the same names (data.body and body) to avoid confusion. If you rename your computed from body() to markedHtml(), the code will be a lot easier to read.

You also didn't import Marked correctly, use this import:

import { marked } from 'marked';