CODEWITHSUNDEEP
javascriptlaravelvue.jsvuejs2
maranovot
maranovot

Reputation: 445

Vue Syntax error after binding a session variable

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":}}),

Upvotes: 1

Views: 3281

Answers (1)

Bert
Bert

Reputation: 82479

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.

Upvotes: 2

Related Questions