Encountering a syntax error while attempting to bind a session variable as a prop of my Vue component. Scrutinizing my code did not reveal any mistakes, but perhaps another set of eyes may catch something.
This is where I have registered 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'
});
The problematic component in question is as follows:
<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">×</span>
</button>
text here
</div>
</template>
<script>
export default{
name: 'FlashMsg',
props: ['message'],
data(){
return{
}
}
}
</script>
And this is how I attempt to use it in my view:
<flash-msg v-bind:message="{{ session('message') }}"></flash-msg>
Upon removing the bind directive, the component loads without any issues. Could there be an issue with the data being passed from the session? For context, Laravel serves as my backend.
This is the error message received:
[Vue warn]: Failed to generate render function:
SyntaxError: Unexpected token } in
with(this){return _c('div',{attrs:{"id":"app"}},[_c('flash-msg',{attrs:{"message":}}),