使用 VueJS 和 Laravel 的 Textarea v-model 初始值答案

【问题标题】：Textarea v-model initial value with VueJS and Laravel使用 VueJS 和 Laravel 的 Textarea v-model 初始值
【发布时间】：2018-09-20 21:42:29
【问题描述】：

我想使用刀片语法将用户名显示为 Markdown 编辑器的默认文本区域值。

<textarea v-model="message">
      {{ $detailsFromLaravelContoller }}
</textarea>
<div v-html="compiledMarkdown"></div>

但我正在使用 v-model 组件作为 textarea 需要 declare message with an empty value 像这样

window.onload = function()
{ 
    var editor = new Vue({
    el: '#editor',
    data: {
        message: '',
        compiledMarkdown: marked('', { sanitize: true }), 
    },
    watch: {
        markdown: function () {
          this.compiledMarkdown = marked(this.message, { sanitize: true })
        }
      }, 
      methods: {

      }
  })  
}

这会使用 laravel 变量的值渲染屏幕。但是很快页面加载后内容消失了（我猜我使用的是 window.onload）。
另外我没有使用 inline VueJS。
P.S：我是 VueJS 和 Laravel 的新手，markdown 的来源 是 here(jsfiddle)
提前致谢！！！

【问题讨论】：

even with an empty value
是的。页面加载后不久，textarea 值消失。通过重复重新加载页面，我注意到内容正在呈现，但在屏幕加载后立即被删除。

标签： laravel vue.js v-model

【解决方案1】：

您正在尝试将 PHP 变量值传递给单独的 Javascript 文件。

我会这样做：

声明一个全局变量detailsFromLaravelContoller将$detailsFromLaravelContoller存储为字符串值

<script>
    var detailsFromLaravelContoller = @json($detailsFromLaravelContoller);
</script>
<textarea v-model="message">
</textarea>

在 Javascript 文件中使用全局变量

data: {
    message: detailsFromLaravelContoller,
},

https://jsfiddle.net/jacobgoh101/0dzvcf4d/9954/

【讨论】：

是'{{ $detailsFromLaravelContoller }}' 和{!! $detailsFromLaravelContoller!!}; 一样吗？
@SebastienD 我已将其更改为 {!! $detailsFromLaravelContoller!!} .我知道php，但我真的不知道laravel。这个SO answer 使用 {!! !!}，所以我现在关注它。很抱歉造成混乱。
感谢您的回答。它有帮助，但只有当 detailsFromLaravelController 从控制器分配了一个字符串值我要分配的是像这样的降价语法'！[在此处输入图像描述] [1] [1]：pbs.twimg.com/media/DZZSOKXUMAEPXbD.jpg'这会引发错误无效或意外令牌这种情况我该怎么办。我知道这个问题不在主题范围内，但非常感谢您提供解决方案
根据@SebastienD 的建议更新了答案。 json_encode 应该可以帮助您转义 markdown 中使用的特殊字符。
这有助于逃脱非法字符。非常感谢

【解决方案2】：

你可以用你的 laravel 变量初始化数据中的v-model。

window.onload = function()
{ 
    var editor = new Vue({
    el: '#editor',
    data: {
        message: {!! $detailsFromLaravelContoller !!},
        compiledMarkdown: marked('', { sanitize: true }), 
    },
    watch: {
        markdown: function () {
          this.compiledMarkdown = marked(this.message, { sanitize: true })
        }
      }, 
      methods: {

      }
  })  
}

【讨论】：

这个看起来有点靠谱，因为在模板中使用脚本标签时 VueJS 给了我一个警告。我会尝试这两个答案，并标记让我的团队成员满意的答案。感谢您的回答。