Corbin
2 months ago
285
1
Vue

[Laravel]: Error compiling template: invalid expression: Invalid or unexpected token in markdown(' '). htmlentities problem? [marked.js]

Posted 2 months ago by Corbin

I'm using marked.js to add git flavoured markdown to my Laravel app.

index.blade.php

@foreach($entries as $entry)
    <a href="/entry/{{$entry->id}}"><h3>{{ $entry->created_at->format('M d Y') }}</h3></a>
    <div v-html="markdown('{{ htmlentities($entry->content) }}')"> </div>
    <hr>
@endforeach

app.js

const marked = require('marked');

const app = new Vue({
    el: '#app',

    methods: {
        markdown(input){
            return marked(input, { sanitize: true })
        }
    }
});

When I run this and add words like "break", "for" or even just basic new paragraph (return), I get an error in the browser console and none of the content shows up.:

app.js:41078 [Vue warn]: Error compiling template:

invalid expression: Invalid or unexpected token in

markdown('smsa.mdsads

hi')

Raw expression: v-html="markdown('smsa.mdsads

hi')"

63 | 64 |

Nov 09 2019

65 |

| ^^^^^

(found in )

Note

I'm pretty sure this isn't a marked.js problem since I'm using marked in my vue components on so JSON, and it works great. Example:

RecordComponent.vue that works

<div  v-for="(record, index) in records">
    
    <h4>Content</h4>
    <div v-if="record.content" v-html="markdown(record.content)"></div>
    <p v-else style="color: #d02105;">Please fill out later</p>

    <hr>
            
</div>

How do I get marked to work in blade like it does in an vue component? What problem am I running into here? I think it might be an html entities problem or something.

Edit

This doesn't seem to have much to do with marked.js. But seems to have everything to do with passing a strange string through

v-html="markdown('smsa.mdsads

 hi')"

Edit 2

Turns out I can't use v-html unless passing a data() property from the vue instance.

What I'm trying to figure out is how to pass a blade variable to a vue method like so:

@foreach($entries as $entry)
    <a href="/entry/{{$entry->id}}"><h3>{{ $entry->created_at->format('M d Y') }}</h3></a>
    <div> @{{this.markdown({{$entry->content}}) }} </div>
    <hr>
@endforeach

Please sign in or create an account to participate in this conversation.