使用VueJS和Laravel的Textarea v模型初始值 [英] Textarea v-model initial value with VueJS and Laravel

问题描述

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

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

但是我正在对文本区域使用v模型组件，这需要像这样用空值声明消息

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 .
PS:我对VueJS和Laravel都是陌生的，降价来源是这里(jsfiddle)
提前谢谢！

解决方案

您正试图将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/

I want to display the username as the default textarea value for markdown editor using blade syntax.

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

But I am using v-model component for the textarea which requires to declare message with an empty value like this

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

      }
  })  
}

This renders the screen with the laravel variable's value. But soon after the page loads the content disappears (as I've used window.onload I guess).
Also I'm not using inline VueJS.
P.S: I'm new to both VueJS and Laravel and the source for the markdown is here(jsfiddle)
Thank you in advance!!!

解决方案

You are trying to pass a PHP variable value to a separate Javascript file.

Here's how I would do it:

Declare a global variable detailsFromLaravelContoller to store $detailsFromLaravelContoller as a string value

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

use the global variable in Javascript file

data: {
    message: detailsFromLaravelContoller,
},

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

这篇关于使用VueJS和Laravel的Textarea v模型初始值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！