Textarea v-model 初始值与 VueJS 和 Laravel

Question

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

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

但我正在为文本区域使用 v-model 组件，它需要像这样 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)
提前致谢！！！

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

您可以使用 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: {

      }
  })  
}

Textarea v-model 初始值与 VueJS 和 Laravel

Textarea v-model initial value with VueJS and Laravel

laravel

vue.js

v-model