Returning raw html from Vue to Laravel Blade

Question

I am trying to preview input of form to another div as html markdown.

<div class="form-group" id="form">
  {!! Form::open(['route' => 'post.create']) !!}
    {{ Form::text('title', 'title', ['class' => 'form-control']) }}
    {{ Form::hidden('category_id', $category->id) }}
    {{ Form::textarea('body', 'body', ['class' => 'form-control', 'v-model' => 'input']) }}
    <div><?php echo '{{{ output }}}'; ?></div>
    {{ Form::submit('send', ['class' => 'btn btn-sm btn-default btn-block']) }}
  {!! Form::close() !!}
</div>

On app.js:

const app = new Vue({
    el: '#form',
    data: {
      input: '',
      output: ''
    },
    watch: {
      input: function(val) {
        this.output = marked(val);
      }
    }
});

@{{{ output }}}} returns the same result which is blank page with error on console:

- invalid expression: Unexpected token ) in

_s({ output)+"}"

Raw expression: {{{ output }}}

it's basicly same as doing @{{{ output }}} as everyone else suggests — Yanek Yuk
– Yanek Yuk, Commented Nov 7, 2017 at 23:36

marciojc · Accepted Answer · 2017-11-07 23:38:33Z

3

If your output is raw html use:

<div v-html="output"></div>

answered Nov 7, 2017 at 23:38

marciojc

5322 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yanek Yuk Over a year ago

Yeah that's the one! Thanks!

Morteza Negahi · Accepted Answer · 2017-11-07 23:44:45Z

0

<div v-text="output"></div>

or

<div>@{{ output }}</div>

or using old way in watch ...

input: function(val) {
    this.output = marked(val);
    $('div.output').text(this.output);
}

answered Nov 7, 2017 at 23:44

Morteza Negahi

3,5138 gold badges26 silver badges42 bronze badges

1 Comment

Yanek Yuk Over a year ago

mersi azizam, but this returns with html tags as string

Collectives™ on Stack Overflow

Returning raw html from Vue to Laravel Blade

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related