У меня проблема с компонентом Vue, который должен просто показывать простой диалог, компонент выглядит так:
<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>
В app.js я добавил следующее:
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'));
И на странице, где я использую компонент, который у меня есть:
<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>
Я не получаю никаких сообщений о том, что компонент не загружен.И если я пытаюсь изменить имя компонента в файле app.js, а затем пытаюсь загрузить компонент, он выдает ошибку, что компонент не может быть найден.Другими словами, кажется, что он успешно загружается.Однако, если я изменю название реквизита, например, изменив
<simple-dialog show="true"
:header="dialog_header"
:text="dialog_message"
@close-dialog-event="display_dialog = false"></simple-dialog>
на
<simple-dialog show_bla="true"
:asdasd="dialog_header"
:asdasd="dialog_message"
@close-dialog-event="display_dialog = false"></simple-dialog>
, это не волнует.Он даже не выдает ошибку о том, что эти реквизиты либо не существуют, либо являются недействительными.Javascript, используемый страницей:
var app = new Vue({
el: '#overview',
data:
{
display_dialog:true,
dialog_header:'',
dialog_message:'',
},
methods:
{
}
});
В чем может быть проблема?Спасибо за любую помощь!