Я использую VueJS Vuetify framework, и мне нужно открыть диалог - который импортируется как шаблон компонента - из другого шаблона. После нажатия кнопки "Меню" в приложении " App.vue" Модаль должен открыть. Вот моя настройка:
- App.vue = шаблон навигации с кнопкой меню
- Modal.vue = Модальный шаблон, импортированный как глобальный в main.js
main.js
import Modal from './components/Modal.vue'
Vue.component('modal', Modal)
Шаблон Modal.vue:
<template>
<v-layout row justify-center>
<v-btn color="primary" dark @click.native.stop="dialog = true">Open Dialog</v-btn>
<v-dialog v-model="dialog" max-width="290">
<v-card>
<v-card-title class="headline">Use Google location service?</v-card-title>
<v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Disagree</v-btn>
<v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Agree</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</template>
<script>
export default {
data () {
return {
dialog: false
}
}
}
</script>
Как открыть диалог?