146 lines
3.0 KiB
Vue
146 lines
3.0 KiB
Vue
<template>
|
|
<div>
|
|
<v-card-subtitle
|
|
class="bg-grey-lighten-4 text-subtitle-2 font-weight-medium py-2"
|
|
>
|
|
SOSIAL
|
|
</v-card-subtitle>
|
|
|
|
<v-card-text>
|
|
<v-row>
|
|
<!-- Agama -->
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="localData.agama"
|
|
label="Agama"
|
|
:items="agamaOptions"
|
|
variant="outlined"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Status Pernikahan -->
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="localData.statusPernikahan"
|
|
label="Status Pernikahan"
|
|
:items="statusPernikahanOptions"
|
|
variant="outlined"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Pendidikan Terakhir -->
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="localData.pendidikanTerakhir"
|
|
label="Pendidikan Terakhir"
|
|
:items="pendidikanOptions"
|
|
variant="outlined"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Pekerjaan -->
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="localData.pekerjaan"
|
|
label="Pekerjaan"
|
|
:items="pekerjaanOptions"
|
|
variant="outlined"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Bahasa yang Dikuasai -->
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="localData.bahasaDikuasai"
|
|
label="Bahasa yang Dikuasai"
|
|
placeholder="Bahasa yang Dikuasai"
|
|
variant="outlined"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Suku/Etnis -->
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="localData.sukuEtnis"
|
|
label="Suku/Etnis"
|
|
placeholder="Suku/Etnis"
|
|
variant="outlined"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from "vue";
|
|
|
|
const props = defineProps({
|
|
formData: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(["update:formData"]);
|
|
|
|
const localData = ref({ ...props.formData });
|
|
|
|
const agamaOptions = [
|
|
"Islam",
|
|
"Kristen",
|
|
"Katolik",
|
|
"Hindu",
|
|
"Buddha",
|
|
"Konghucu",
|
|
"Lainnya"
|
|
];
|
|
|
|
const statusPernikahanOptions = [
|
|
{ title: "Belum Menikah", value: "belum_menikah" },
|
|
{ title: "Menikah", value: "menikah" },
|
|
{ title: "Cerai Hidup", value: "cerai_hidup" },
|
|
{ title: "Cerai Mati", value: "cerai_mati" }
|
|
];
|
|
|
|
const pendidikanOptions = [
|
|
"Tidak Sekolah",
|
|
"SD",
|
|
"SMP",
|
|
"SMA/SMK",
|
|
"D1",
|
|
"D3",
|
|
"D4/S1",
|
|
"S2",
|
|
"S3"
|
|
];
|
|
|
|
const pekerjaanOptions = [
|
|
"PNS",
|
|
"TNI/Polri",
|
|
"Pegawai Swasta",
|
|
"Wiraswasta",
|
|
"Petani",
|
|
"Nelayan",
|
|
"Buruh",
|
|
"Ibu Rumah Tangga",
|
|
"Pelajar/Mahasiswa",
|
|
"Tidak Bekerja",
|
|
"Lainnya"
|
|
];
|
|
|
|
watch(
|
|
localData,
|
|
(newVal) => {
|
|
emit("update:formData", newVal);
|
|
},
|
|
{ deep: true }
|
|
);
|
|
</script>
|