将原始 html 从 Vue 返回到 Laravel Blade

Posted 2023-02-22

【中文标题】将原始 html 从 Vue 返回到 Laravel Blade

【英文标题】：Returning raw html from Vue to 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 基本相同

【参考方案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>

【讨论】：

是的，就是这个！谢谢！