未加工HTMLをVueからLaravel Bladeに戻す

Question

別の部門にフォームの入力をHTMLマークダウンとしてプレビューしようとしています。 app.jsで

<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> 

：

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

@{{{ output }}}}がコンソールにエラーで空白のページがあり、同じ結果を返します：

- invalid expression: Unexpected token) in 

_s({ output)+"}" 

Raw expression: {{{ output }}} 

Answer 1

あなたの出力は生のHTML使用の場合：

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

は、

Answer 2

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

または

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

や時計に古い方法を使用して...

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