cssd-front/src/components/modal/user/Confirmation.vue

<template>
    <v-form>
        <v-container grid-list-xs fluid>
            <material-card class color="black" title="Confirmation">
                <div class="text-center"> Are you sure?</div>
                <v-layout row wrap>
                    <v-layout align-center justify-center wrap class="px-5 mt-2">
                        <v-btn @click="changeRole" class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
                            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
                            <span class="white--text">Confirm</span>
                        </v-btn>
                        <v-btn @click="closeModal" class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
                            <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
                            <span class="black--text">Close</span>
                        </v-btn>
                    </v-layout>
                </v-layout>
            </material-card>
        </v-container>
    </v-form>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
export default {
    methods: {
        ...mapMutations("modal", ["closeModal"]),
        async changeRole() {
            this.getModal?.success()
        }
    },
    computed: {
        ...mapGetters("modal", ["getModal"])
    }
};
</script>
<style>
.text-center {
    text-align: center;
}
</style>