2

First of all, i've already read this post but it didn't help me (or i wasn't able to solve with that)

I've got a component which is a Vuetify Modal (ModalTurno.vue). I'm trying to open this from a button in my Bottom Nav (bottomNav.Vue) (also a component).

I was even able to do that! but it opens on the Bottom Nav div. So I'd like to open this on my main vue (Turno.Vue) so i'll be able to see the whole modal. This is driven me crazy

Vuetify Modal (ModalTurno.Vue):

    <template>
    <v-dialog v-model="dialog" persistent max-width="500px" >
      <v-card>
        <v-card-title>
          <span class="headline">User Profile</span>
        </v-card-title>
      </v-card>
    </v-dialog>
</template>

<script>
  export default {
    data: () => ({
      dialog: false
    })
   }
</script>

Bottom Nav (bottomNav.Vue) (Where the button is):

 <template>
  <v-card height="200px" flat>
    <v-bottom-nav
      :value="true"
      color="indigo"
      fixed
    >
       <v-btn
        dark
        flat
        value="favorites">
          <span>Agregar turno</span>
          <v-icon>add_circle</v-icon>
      </v-btn> <!--THIS IS THE BUTTON TO OPEN THE DIALOG -->

    </v-bottom-nav>
  </v-card>
</template>

<script>
export default {
  name: 'header',
  data () {
      return {
          bottomNav: 'recent'
      }
  }
}
</script>

Turno.Vue (Where the modal should be displayed):

<template>
  <div>
    <bottomNav> </bottomNav>

    <modalTurno>  </modalTurno>
  </div>
</template>

<script>
import bottomNav from "./components/bottomNav.vue";
import modalTurno from "./components/ModalTurno.vue";

export default {
  name: 'turno',
  components: {
    bottomNav,
    modalTurno 
  }
}
</script>

Thanks to everyone who use his/her time to read this post!

AtarC5
  • 393
  • 2
  • 11
  • 27
  • Possible duplicate of [Communication between sibling components in VueJs 2.0](https://stackoverflow.com/questions/38616167/communication-between-sibling-components-in-vuejs-2-0) – Aldarund Jul 19 '18 at 21:29
  • Maybe I'm misunderstanding the problem it- Is the issue that you want component A to have a button that triggers a modal in component B? Is that correct? Or is this a layout issue of some sort? – rob Jul 19 '18 at 21:45
  • @rob I have 2 components and 1 parent(C) Component A is a modal Component B has a button. I want display A in C after trigger btn in B – AtarC5 Jul 19 '18 at 21:50
  • @Aldarund That was a bit different, however, it was useful for me. Thank you! – AtarC5 Jul 19 '18 at 21:55

1 Answers1

3

You could do this by :

in Turno.vue

in bottomNav.Vue

  • add @click="$parent.$refs.modalTurno.dialog = true" to v-btn (this will update dialog in modalTurno)
tony19
  • 125,647
  • 18
  • 229
  • 307
Oudmane
  • 97
  • 1
  • 5
  • Thank you! It works!. I think it's the easiest way to communicate sibling components. At least the one i know :) – AtarC5 Jul 19 '18 at 21:54
  • 1
    @Natarr thats ugly way to do it :) better to use vuex store or eventbus – Aldarund Jul 19 '18 at 22:00
  • If you are using this type of functionality often, consider creating a global event bus. It's incredibly simple to do, and allows you to emit and listen for events in a single place all over your code. I highly recommend it: https://alligator.io/vuejs/global-event-bus/. – rob Jul 19 '18 at 22:01
  • @rob thanks for commenting. I tried to use an eventbus, but i don't know where to put the listener in Turno.vue and how to display the ModalTurno. I easily get confues with vue syntax – AtarC5 Jul 19 '18 at 22:32
  • Aldarund & rob are right, you can use my example if you have this case one time, if you gonna need to open the dialog from lot of places, it's better to use an event bus – Oudmane Jul 19 '18 at 22:35
  • @Natarr put the listener in the mounted block of your vue component. You just need something like bus.$on('event-name', function(){...}); – rob Jul 20 '18 at 11:31