将原始 html 从 Vue 返回到 Laravel Blade [英] Returning raw html from Vue to Laravel Blade

问题描述

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

{！！表单::打开(['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']) }}{！！表单::关闭() !!}

在 app.js 上:

const app = new Vue({el: '#form',数据: {输入: ''，输出: ''},手表: {输入:函数(val){this.output = 标记(val)；}}});

@{{{ output }}}} 返回相同的结果，即控制台上有错误的空白页:

- 无效表达式:意外标记 ) 中_s({输出)+"}"原始表达式:{{{ 输出}}}

解决方案

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

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

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

解决方案

If your output is raw html use:

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

这篇关于将原始 html 从 Vue 返回到 Laravel Blade的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！