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

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
– Prasanna Kumar, Commented Apr 11, 2018 at 6:21

Buraco · Accepted Answer · 2019-04-02 20:46:12Z

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 2, 2019 at 20:46

Buraco

4615 silver badges9 bronze badges

answered Apr 11, 2018 at 6:26

Jacob Goh

20.9k5 gold badges58 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sebastien D Over a year ago

is '{{ $detailsFromLaravelContoller }}' the same as {!! $detailsFromLaravelContoller!!}; ?

Jacob Goh Over a year ago

@SebastienD I've changed it to {!! $detailsFromLaravelContoller!!} . I know php but I don't really know laravel. This SO answer use {!! !!}, so I follow it now. Sorry for the confusion.

Jacob Goh Over a year ago

answer updated based on @SebastienD's suggestion. json_encode should help you escape the special characters used in markdown.

Prasanna Kumar Over a year ago

That helped to escape the illegal characters. Thanks a lot

Agney · Accepted Answer · 2018-04-11 06:35:44Z

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, 2018 at 6:35

Agney

19.3k7 gold badges60 silver badges76 bronze badges

1 Comment

Prasanna Kumar Over a year ago

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.

Collectives™ on Stack Overflow

Textarea v-model initial value with VueJS and Laravel

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest