Question

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

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

但我正在为textarea使用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）。我也没有使用内联VueJS 。
P.S：我对VueJS和Laravel都很陌生，降价来源是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: {

      }
  })  
}

使用VueJS和Laravel

2 个答案: