Textarea v-model initial value with VueJS and Laravel

Question

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!!!

[even with an empty value](https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties) — Agney, Apr 11 '18 at 06:17
Yes. Soon after the page loads the **textarea value disappears**. I was able to notice that the content is being rendered but removed immediately after screen loading by **reloading the page repeatedly**. — Prasanna Kumar, Apr 11 '18 at 06:21

score 2 · Accepted Answer · edited Apr 02 '19 at 20:46

2

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/

edited Apr 02 '19 at 20:46

Buraco

413
5
9

answered Apr 11 '18 at 06:26

Jacob Goh

19,800
5
53
73

is `'{{ $detailsFromLaravelContoller }}'` the same as `{!! $detailsFromLaravelContoller!!};` ? – Sebastien D Apr 11 '18 at 06:31
@SebastienD I've changed it to {!! $detailsFromLaravelContoller!!} . I know php but I don't really know laravel. This [SO answer](https://stackoverflow.com/a/31201101/5599288) use {!! !!}, so I follow it now. Sorry for the confusion. – Jacob Goh Apr 11 '18 at 06:34
1

answer updated based on @SebastienD's suggestion. `json_encode` should help you escape the special characters used in markdown. – Jacob Goh Apr 11 '18 at 06:55
That helped to escape the illegal characters. Thanks a lot – Prasanna Kumar Apr 11 '18 at 07:08

score 2 · Answer 2 · answered Apr 11 '18 at 06:35

2

You can initialize the v-model in data with your laravel variable.

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

      }
  })  
}

answered Apr 11 '18 at 06:35

Agney

18,522
7
57
75

This one seems a little reliable because VueJS gives me a warning when using script tags in templates. I'll try both the answers and mark the one which satisfies my team members. Thanks for answering. – Prasanna Kumar Apr 11 '18 at 07:11

Textarea v-model initial value with VueJS and Laravel

2 Answers2

Linked