带有 VueJS 和 Laravel 的 Textarea v-model 初始值

Question

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

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

但是我正在为 textarea 使用 v-model 组件，它需要像这样声明带有空值的消息

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 变量的 value呈现屏幕。但是在页面加载后不久内容就消失了（因为我已经使用了 window.onload 我猜）。
另外我没有使用内联 VueJS。
PS：我是新来的都VueJS和Laravel和对降价的来源是在这里（的jsfiddle）
预先感谢您！

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