Monday, May 20, 2024
Homepage · vuejs2
 Popular · Latest · Hot · Upcoming
132
rated 0 times [  135] [ 3]  / answers: 1 / hits: 129869  / 7 Years ago, sat, december 30, 2017, 12:00:00

I'm using the VueJS Vuetify framework and I need to open a dialog - that gets imported as a component template - from another template. Once the Menu button in App.vue got clicked, the Modal should open.
Here is my setup:




  • App.vue = navigation template with Menu button

  • Modal.vue = Modal template, imported as global in main.js



main.js



import Modal from './components/Modal.vue'

Vue.component('modal', Modal)


Modal.vue Template:



<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's 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>


How to open the dialog?


More From » vuejs2
 Answers
126

You can open the dialog using custom events and using an event bus for non parent-child communication.


If your application gets a bit more complex I recommend you use Vuex for state management.



Event bus solution:


In your main.js or in a new file create and export a new Vue instance :


export const bus = new Vue()


In app.vue import the busand emit the event:


<template>

  <div>

    <button @click.prevent="openMyDialog()">my button</button>

  </div>

</template>



<script>

  import {bus} from '../main' // import the bus from main.js or new file

  export default {

    methods: {

      openMyDialog () {

        bus.$emit('dialog', true) // emit the event to the bus

      }

    }

  }

</script>

In modal.vue also import the bus and listen for the event in the created hook:


<script>

  import {bus} from '../main'    

  export default {

    created () {

      var vm = this

      bus.$on('dialog', function (value) {

        vm.dialog = value

      })

    }

  }

</script>

[#55574] Saturday, December 23, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
daquanmilesw
Add To Favorites
Follow
Total Points: 57
Total Questions: 102
Total Answers: 110
Location: Wallis and Futuna
Member since Sat, Aug 6, 2022
2 Years ago
daquanmilesw questions
Thu, Jan 13, 22, 00:00, 2 Years ago
Tue, Jul 13, 21, 00:00, 3 Years ago
Sat, Jul 10, 21, 00:00, 3 Years ago
Thu, Sep 17, 20, 00:00, 4 Years ago
Wed, Jun 24, 20, 00:00, 4 Years ago
View All
;