将原始 html 从 Vue 返回到 Laravel Blade答案

【问题标题】：Returning raw html from Vue to Laravel Blade将原始 html 从 Vue 返回到 Laravel Blade
【发布时间】：2018-04-20 12:23:37
【问题描述】：

我正在尝试将表单的输入作为 html markdown 预览到另一个 div。

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

在app.js:

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

【问题讨论】：

你为什么在刀片上做php echo？？？？
这与其他人建议的 @{{{ output }}} 基本相同

标签： javascript php laravel vue.js

【解决方案1】：

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

或

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

或在手表中使用旧方式...

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

【讨论】：

mersi azizam，但这会以 html 标签作为字符串返回

【解决方案2】：

如果您的输出是原始 html，请使用：

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

【讨论】：

是的，就是这个！谢谢！