Vue Syntax error after binding a session variable

Question

I'm getting this syntax error when I try to bind a session variable as a prop of my vue component. I reviewed my code and I haven't found the mistake in my code. But more eyes could spot something, I hope.

Here is where I register my components:

Vue.component('fav-btn', require('../components/FavBtn.vue'));
Vue.component('fund-btn', require('../components/FundBtn.vue'));
Vue.component('flash-msg', require('../components/FlashMsg.vue'));

const vm = new Vue({
    el: '#app'
});

Here is the component that is giving me trouble:

<template>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        text here
    </div>
</template>

<script>
    export default{
        name: 'FlashMsg',

        props: ['message'],

        data(){
            return{

            }
        }
    }
</script>

And here is how I use it in my view:

<flash-msg v-bind:message="{{ session('message') }}"></flash-msg>

Here when I remove the bind directive the component loads without any problem. So maybe there is problem with the passed data from session? I use Laravel as my backend.

Here is the error:

[Vue warn]: Failed to generate render function:

SyntaxError: Unexpected token } in

with(this){return _c('div',{attrs:{"id":"app"}},[_c('flash-msg',{attrs:{"message":}}),

Why are you using mustache syntax while passing prop? Just use v-bind:message="session('message')" — Vamsi Krishna
– Vamsi Krishna, Commented May 20, 2017 at 12:21
@user7814783 Well, I'm not sure. But I always pass data like that from laravel to vue and so far I haven't experienced any problems. Your approach throws these errors: Property or method "session" is not defined on the instance but referenced during render. And Error in render function: "TypeError: session is not a function" — maranovot
– maranovot, Commented May 20, 2017 at 12:52

Bert · Accepted Answer · 2017-05-20 13:21:11Z

2

This is a case where you don't need the bind syntax. Since the message value is coming from the server, it's basically a static value client side and message="value" is perfectly fine.

You get the syntax error because when you using the binding syntax, (v-bind or :) Vue will try to find a variable with the name of whatever ended up between the quotes. Let's say your rendered output ended up being

v-bind:message="Hello World"

Then Vue is going to evaluate Hello World in a javascript context to find out what the value of Hello World is. Clearly, Hello World is not a valid javascript expression and results in a syntax error.

answered May 20, 2017 at 13:21

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

Vue Syntax error after binding a session variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related