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

Question

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

<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 变量的值渲染屏幕。但是在页面加载后不久，内容就消失了（我猜我已经使用了 window.onload）。
另外我没有使用内联 VueJS。
PS：我是 VueJS 和 Laravel的新手，markdown的来源在这里（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/

Answer 2

v-model您可以使用 laravel 变量初始化in 数据。

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

      }
  })  
}