1. Anuncie Aqui ! Entre em contato fdantas@4each.com.br
Anuncie aqui Patrocinador Anuncios

Modal controls in vue components

Discussão em 'Outras Linguagens' iniciado por Graeme Robinson, Outubro 17, 2024 às 10:12.

  1. Graeme Robinson

    Graeme Robinson Guest

    I'm making an edit user account page in Laravel, Vue, and Inertia. The user changes their information via forms that are stored as reusable modals.

    The demo button makes the modal work fine, but when I try to put the open/close functionality in a component different to the modal component itself, it doesn't register. Not sure what I'm doing wrong.

    UpdateInfo.vue

    <script setup>

    import Card_Header from "../../../Components/Card_Header.vue";
    import Modal from "../../../Components/Modal.vue";
    import { router, useForm } from "@inertiajs/vue3";

    </script>

    <template>
    <Head title=" || Update Info" />

    <div class="card">
    <div class="card-content">

    <Card_Header title="Your Details" /><!-- open/close button here -->

    <Modal>
    <!-- modal content -->
    </Modal>

    </div><!-- card-content -->
    </div><!-- card -->
    </template>


    CardHeader.vue

    <script setup>

    defineProps({
    title: String,
    });

    </script>

    <template>

    <nav class="level is-mobile">
    <div class="level-left">
    <div class="level-item">
    <h3 class="subtitle is-size-4">{{ title }}</h3>
    </div><!-- level-item -->
    </div><!-- Left side -->
    <div class="level-right">
    <div class="level-item">
    <button class="button" @click="openModal = !openModal">Edit</button>
    </div><!-- level-item -->
    </div><!-- Right side -->
    </nav>

    </template>


    Modal.vue

    <script setup>

    import { onMounted, ref } from "vue";

    const props = defineProps({})

    const openModal = ref(false)

    </script>

    <template>
    <button class="button" @click="openModal = !openModal">Demo button, delete later</button>
    <div class="modal" :class="{ 'is-active': openModal }">
    <div class="modal-background"></div>
    <div class="modal-content">
    <div class="card">
    <div class="card-content">

    <slot />

    </div>
    </div>

    </div><!-- modal content -->
    <button class="modal-close is-large" aria-label="close" role="button" @click="openModal = !openModal"></button>
    </div><!-- modal -->

    </template>

    Continue reading...
    Graeme Robinson, Outubro 17, 2024 às 10:12
    #1

Compartilhe esta Página