Открытие (и закрытие) vue диалогового окна материалов для различных компонентов - PullRequest
Новая
       33

Открытие (и закрытие) vue диалогового окна материалов для различных компонентов

0 голосов
/ 05 мая 2020

Я пытаюсь открыть диалоговое окно vue материала для дочернего компонента. Я хочу, чтобы кнопка триггера оставалась на родительском компоненте, а шаблон диалогового окна - на дочернем компоненте, чтобы его было легче поддерживать.

Диалоговое окно открывается правильно, но когда я нажимаю кнопку закрытия, диалоговое окно закрывается, но я не могу открыть его снова с помощью кнопки запуска. Я использую опору для передачи переменных от родителя к потомку.

Как закрыть диалоговое окно и снова открыть его?

app. vue: 

<template>
  <div>
    <button @click="showContextMenu = true">
      <span>Show Context Menu</span>
    </button>
    <contextMenu :showContextMenu="showContextMenu"></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="showContextMenu = false">Close</md-button>
    </md-dialog-actions>
  </md-dialog>
</template>

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

Ответы [ 2 ]

2 голосов
/ 05 мая 2020

Фактически вы пытаетесь установить свойство, представленное в app, но вы переключаете его на false в contextMenu.

Мутация опоры не рекомендуется.

Сделайте это вместо

Приложение. 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>

Затем в contextMenu, передать событие родителю.

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>
1 голос
/ 05 мая 2020

Передача props дочерним компонентам создает одностороннюю привязку, поэтому вы не можете использовать их для передачи состояния от дочернего элемента к его родительскому. Вы можете сделать так, чтобы contextMenu испустил событие, при котором вы измените значение переменной showContextMenu в родительском элементе. Помните следующее: реквизиты используются для передачи состояния от родительских компонентов к дочерним, а события - для обратного.

Код будет выглядеть так:

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>
...