Переключить модальное диалоговое окно из родительского компонента в VUE - PullRequest
Новая
       19

Переключить модальное диалоговое окно из родительского компонента в VUE

0 голосов
/ 08 апреля 2020

Итак, я хочу переключить мой модальный диалог из родительского компонента, и я попробовал каждый шаг, упомянутый здесь Переполнение стека Вопрос о той же самой Топи c, но мой Модальный диалог все еще не виден, и он даже не определен значение, когда я вижу из VUE консоли. а в разделе Элементы модальное диалоговое окно div не создается.

МОЙ МОДАЛЬНЫЙ ДИАЛОГ не отображается в разделе элементов на веб-странице, а отображается в консоли Vue с неопределенным значением проп. Но эффект Click работает из родительского компонента. и модальное значение true, когда я нажимаю на div.

Мой родительский код 

<template>
    <div class="collection">
        <section class="section section-elements">
            <div class="elements-outer" @click="openModal">
                 <CopyComponent v-bind:item="item"/>                            
           </div>
        </section>
        <modal v-modal="modal"/>
    </div>
</template>
<script>
import Modal from "../components/Modal.vue";
export default {
    name: 'Collection',
    components: {
        Modal
    },
    data() {
        return {
            modal: false
        }
    },
    methods: {
        openModal() {
            this.modal = !this.modal;
        }
    }

}
</script>

Мой дочерний компонент 

<template>
<div v-if="value" class="modal">
    <div class="body">
        body
    </div>
    <div class="btn_cancel" @click="modalToggle">
        <i class="icon icon-cancel" />
    </div>
</div>
</template>

 <script>
   export default {
   name: "Modal",
   props: ["value"],
   methods: {
    modalToggle() {
      this.$emit("input", !this.value);
    }
  }
};
</script>

Я пропал что-нибудь?

Пожалуйста, помогите, спасибо.

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

Ваша опора называется value, поэтому вам нужно передать ее из родительского компонента, а также назначить событие для переключения модального режима. 

<modal :value="modal" @toggle="modalToggle"/>

А у вашего ребенка: 

<template>
<div v-if="value" class="modal">
    <div class="body">
        body
    </div>
    <div class="btn_cancel" @click="modalToggle">
        <i class="icon icon-cancel" />
    </div>
</div>
</template>
<script>
   export default {
   name: "Modal",
   props: ["value"],
   methods: {
    modalToggle() {
      this.$emit("toggle");
    }
  }
}
</script>
1 голос
/ 08 апреля 2020

Вы ошиблись v-model в <modal v-modal="modal"/>, должно быть <modal v-model="modal"/>

...