effendy-dev
43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import Test from "~/components/ui-components/dialogs/Test.vue";
|
|
|
|
// State untuk mengontrol modal
|
|
const showModal = ref(false);
|
|
|
|
// State untuk data array
|
|
const listData = ref<string[]>(['Data Existing 1']);
|
|
|
|
// Fungsi yang dijalankan jika user pilih "Ya" di child
|
|
const eksekusiTambahData = () => {
|
|
const ID = Math.floor(Math.random() * 1000);
|
|
listData.value.push(`Data Baru #${ID}`);
|
|
console.log('Data berhasil ditambahkan dari Parent!');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<v-container class="fill-height justify-center">
|
|
<div class="text-center">
|
|
<h2 class="mb-4">Daftar Data</h2>
|
|
|
|
<v-list border class="mb-4 text-left" rounded="lg">
|
|
<v-list-item v-for="(item, i) in listData" :key="i">
|
|
{{ item }}
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
<v-btn color="primary" size="large" @click="showModal = true">
|
|
Tambah Data Baru
|
|
</v-btn>
|
|
|
|
<Test
|
|
v-model="showModal"
|
|
title="Konfirmasi Tambah"
|
|
message="Apakah anda yakin ingin menambahkan data baru ke dalam array?"
|
|
@action-ya="eksekusiTambahData"
|
|
/>
|
|
</div>
|
|
</v-container>
|
|
</template>
|