Oct 22, 2017

Level 27

Use of undefined constant message

Hello,

I am experimenting with Vue and get this error :

Use of undefined constant message - assumed 'message'

How to fix it?

home.blade.php

{{ message }}  

...

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.1/vue.min.js"></script>

<script>


new Vue({
        el: '#app',
        data: {
        message: 'Hello World'
    }
});

</script>

thomaskim

8 years ago

Level 41

Laravel's Blade engine is trying to echo out message. If you want to use Vue's curly braces instead, prepend it with the @ symbol.

@{{ message }}

Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you may use the @ symbol to inform the Blade rendering engine an expression should remain untouched. For example:

https://laravel.com/docs/5.5/blade

2 likes

davy_yg

8 years ago

Level 27

I am trying the first tutorial:

<body>
    
    <div id="app">
          @{{ message }}  
    </div>

    <input v-model="message">

    @{{ $data | json }}

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.1/vue.min.js"></script>
<script>

new Vue({
    el: '#app',
    data: {
        message: 'Hello World'
    }
 });
    
</script>  


    </body>

This is the result:

Hello World [_______________] {{ $data | json }}

I wonder why when I type the text, the text above it not changing along the text that I type
I wonder why the $data under it not showing value
I wonder why I keep having to write @{{ so that no error appearing

tisuchi

8 years ago

Level 70

Why you use $ for that?

    @{{ $data | json }}

Shouldn't it be like this?

    @{{ data | json }}

2 likes

tisuchi

8 years ago

Best Answer

Level 70

Another error is, you must call all the vueJS inside your element that you declare in your vue.

For example-

<div id="app">
          @{{ message }}  
    </div>

    <input v-model="message">

    @{{ $data | json }}

Your id="app" end before your input tag. That's the another reason for not printing our your vue.

It should be like this-

<div id="app">
          @{{ message }}  

    <input v-model="message">

    @{{ data | json }}


</div> <!-- end your id="app" -->

7 likes

davy_yg

8 years ago

Level 27

The tutorial show this:

{{ $data | json }}

Anyway, now all working thanks.

Abhishek_patel

1 year ago

Level 1

In my case, i use @ this is working

<!-- Production build of Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  @{{ message }}
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello World'
      };
    }
  });

  app.mount('#app');
</script>

Please or to participate in this conversation.