Vue component does not render and ignores props - laravel-5

Question

I am having a problem with a Vue component which should just show a simple dialog, the component looks like this:
<template>
<v-layout row justify-center>
<v-dialog
v-model="show"
max-width="290"
:persistent="persistent"
>
<v-card>
<v-card-title class="headline grey lighten-2">{{header}}</v-card-title>
<v-card-text v-html="text">
{{text}}
</v-card-text>
<v-card-actions>
<v-layout>
<v-flex xs6 md6 lg6 class="text-xs-center">
<v-btn block
color="primary"
flat
#click="closeDialog(true)"
>
{{agree_button_text}}
</v-btn>
</v-flex>
<v-flex xs6 md6 lg6 class="text-xs-center">
<v-btn block
color="warning"
flat
#click="closeDialog(false)"
>
{{abort_button_text}}
</v-btn>
</v-flex>
</v-layout>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</template>
<script>
export default {
props:
{
persistent:
{
type: Boolean,
required: false,
default: false
},
header:
{
type: String,
required: false,
default: ""
},
text:
{
type:String,
required: false,
default:""
},
abort_button_text:
{
type: String,
required: false,
default:"Avbryt"
},
agree_button_text:
{
type: String,
required: false,
default: "OK"
},
value:
{
}
},
data ()
{
return {
show: this.value
}
},
methods:
{
closeDialog:
function(retval)
{
this.show = false;
this.$emit('close-dialog-event',retval);
}
}
}
</script>
In app.js I have added the following:
require('./bootstrap');
import babelPolyfill from 'babel-polyfill';
import Vuetify from 'vuetify'
window.Vue = require('vue');
var vueResource = require('vue-resource');
window.socketIo = require('vue-socket.io');
Vue.use(vueResource);
Vue.use(Vuetify);
Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('simple-dialog', require('./components/common/SimpleDialog.vue'));
And on the page where I use the component I have:
<div id="overview">
<simple-dialog show="true"
:header="dialog_header"
:text="dialog_message"
#close-dialog-event="display_dialog = false"></simple-dialog>
<v-app>
<v-content>
<v-container>
FOO AND BAR
</v-container>
</v-content>
</v-app>
</div>
I don't get any errors that the component is not loaded.
And if I try to change the name of the component in the app.js file and then try to load the component it throws an error that the component can not be found. So in others words it seems that it loads successfully. However, if I change the name of the props, e.g. changing
<simple-dialog show="true"
:header="dialog_header"
:text="dialog_message"
#close-dialog-event="display_dialog = false"></simple-dialog>
to
<simple-dialog show_bla="true"
:asdasd="dialog_header"
:asdasd="dialog_message"
#close-dialog-event="display_dialog = false"></simple-dialog>
it does not care. It does not even throw an error about that those props either does not exists or are invalid. The javascript used by the page:
var app = new Vue({
el: '#overview',
data:
{
display_dialog:true,
dialog_header:'',
dialog_message:'',
},
methods:
{
}
});
What could the problem be? Thanks for any help!

Answer 1

Well, When you're sending the value to the component and your prop show is initialized as an empty object.
replace
value: {}
to
value
or
the pass default value to false
value: {
type: Boolean
default: false
}
Hope this helps!