open a vuetify dialog from a component template in vuejs

Solutions on MaxInterview for open a vuetify dialog from a component template in vuejs by the best coders in the world

showing results for - "open a vuetify dialog from a component template in vuejs"
Lorenzo
29 Mar 2017
1Parent component:
2
3<template>
4   <v-btn color="accent" large @click.stop="showScheduleForm=true">    
5   <ScheduleForm v-model="showScheduleForm" />
6</template>
7
8<script>
9import ScheduleForm from '~/components/ScheduleForm'
10
11export default {
12  data () {
13    return {
14      showScheduleForm: false
15    }
16  },
17  components: {
18    ScheduleForm
19  }
20}
21</script>
22Child component (ScheduleForm):
23
24<template>
25<v-dialog v-model="show" max-width="500px">
26  <v-card>
27    <v-card-actions>
28      <v-btn color="primary" flat @click.stop="show=false">Close</v-btn>
29    </v-card-actions>
30  </v-card>
31</v-dialog>
32</template>
33
34<script>
35export default {
36  props: {
37     value: Boolean
38  },
39  computed: {
40    show: {
41      get () {
42        return this.value
43      },
44      set (value) {
45         this.$emit('input', value)
46      }
47    }
48  }
49}
50</script>
51