Corbin
2 months ago
215
3
Laravel

How do I pass a blade variable as a vue methods property?

Posted 2 months ago by Corbin

I'm trying to pass a blade variable to a vue method so it can be converted to git flavoured markdown using marked.js.

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

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

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

Error

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

invalid expression: Unexpected token '{' in

    " "+_s(this.markdown({{$entry->content)+") }} "

  Raw expression: {{this.markdown({{$entry->content}}) }}


63 |                  <div class="card-body">
64 |                                                                          <a href="/entry/2"><h3>Nov 09 2019</h3></a>
65 |                              <div> {{this.markdown({{$entry-&gt;content}}) }} </div>
   |                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
66 |                              <hr>
67 |                                                      <a href="/entry/1"><h3>Oct 31 2019</h3></a>

(found in <Root>)
warn @ app.js:41078
(anonymous) @ app.js:52125
compileToFunctions @ app.js:52124
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:52348
Vue._init @ app.js:45450
Vue @ app.js:45516
./resources/js/app.js @ app.js:52507
__webpack_require__ @ app.js:20
0 @ app.js:52808
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
app.js:41078 [Vue warn]: Error compiling template:

invalid expression: Unexpected token '{' in

    " "+_s(this.markdown({{$entry->content)+") }} "

  Raw expression: {{this.markdown({{$entry->content}}) }}


66 |                              <hr>
67 |                                                      <a href="/entry/1"><h3>Oct 31 2019</h3></a>
68 |                              <div> {{this.markdown({{$entry-&gt;content}}) }} </div>
   |                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
69 |                              <hr>
70 |                                                              </div>

(found in <Root>)

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