[Vuejs]-Opening (and Closing) vue material dialog on different components

by

2👍

✅

Passing props to child components creates a one way binding, thus you cannot use them to pass state from child to its parent. You can have you contextMenu emit an event, on which you change the value of the showContextMenu variable in parent. Remember the following: props are used for passing state from parent to child components and events for doing the reverse.

The code would look like this:

app.vue:

<template>
  <div>
    <button @click="showContextMenu = true">
      <span>Show Context Menu</span>
    </button>
    <contextMenu :showContextMenu="showContextMenu" @close="showContextMenu = false"></contextMenu>
  </div>
</template>

<script>
import contextMenu from "contextMenu.vue";

export default {
  data() {
    return {
      showContextMenu: false,
    };
  },
  components: {
    contextMenu,
  },
};
</script>

contextMenu.vue:

<template>
  <md-dialog :md-active.sync="showContextMenu">
    <md-dialog-title>Preferences</md-dialog-title>Dialog
    <md-dialog-actions>
      <md-button class="md-primary" @click="$emit('close')">Close</md-button>
    </md-dialog-actions>
  </md-dialog>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["showContextMenu"],
};
</script>
👤AndrejH

2👍

You are actually trying to set a property present in app, but you are toggling it false in contextMenu.

Mutating prop is never recommended.

Do this instead

App.vue

<template>
  <div>
    <button @click="showContextMenu = true">
      <span>Show Context Menu</span>
    </button>
    <contextMenu v-if="showContextMenu" 
     :showContextMenu="showContextMenu" 
     @close-context="showContextMenu = false"> //capturing event close-context
    </contextMenu>
  </div>
</template>

Then in contextMenu, emit an event to parent.

contextMenu.vue

<template>
  <md-dialog :md-active.sync="showContextMenu">
    <md-dialog-title>Preferences</md-dialog-title>Dialog
    <md-dialog-actions>
      <md-button class="md-primary" @click="closeContext">Close</md-button>
    </md-dialog-actions>
  </md-dialog>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    closeContext() {
      this.$emit('close-context'); // emitting to parent
    },
  props: ["showContextMenu"],
};
</script>
👤Utsav Patel

Leave a comment