102 lines
2.3 KiB
Vue
102 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
definePageMeta({
|
|
title: 'Vue Form',
|
|
icon: 'mdi-checkbox-blank-off-outline',
|
|
drawerIndex: 0,
|
|
})
|
|
|
|
const data = ref({})
|
|
const humanName = ref({})
|
|
const onChange = () => {
|
|
humanName.value = parseName(data.value.nama)
|
|
}
|
|
|
|
const handleResponse = (response, form$) => {
|
|
console.log(response) // axios response
|
|
console.log(response.status) // HTTP status code
|
|
console.log(response.data) // response data
|
|
|
|
console.log(form$) // <Vueform> instance
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ma-4">
|
|
<Vueform
|
|
v-model="data"
|
|
@change="onChange"
|
|
endpoint="/api/practitioner/test"
|
|
method="post"
|
|
@response="handleResponse"
|
|
sync
|
|
>
|
|
<TextElement
|
|
name="nama"
|
|
placeholder="Nama Lengkap"
|
|
:rules="['required', 'min:3', 'max:100']"
|
|
/>
|
|
<StaticElement name="parsed-name" size="sm">
|
|
<div class="d-flex flex-row">
|
|
<v-chip
|
|
v-for="prefix in humanName.prefix"
|
|
size="x-small"
|
|
class="mr-1 bg-indigo-lighten-3"
|
|
>{{ prefix }}</v-chip
|
|
><v-chip
|
|
v-for="given in humanName.given"
|
|
size="x-small"
|
|
class="mr-1 bg-blue-darken-3"
|
|
>{{ given }}</v-chip
|
|
>
|
|
<v-chip
|
|
v-show="humanName.family"
|
|
size="x-small"
|
|
class="mr-1 bg-blue"
|
|
>{{ humanName.family }}</v-chip
|
|
>
|
|
<v-chip
|
|
v-for="suffix in humanName.suffix"
|
|
size="x-small"
|
|
class="mr-1 bg-indigo-lighten-3"
|
|
>{{ suffix }}</v-chip
|
|
>
|
|
</div>
|
|
</StaticElement>
|
|
<RadiogroupElement
|
|
name="gender"
|
|
view="tabs"
|
|
label="Jenis Kelamin"
|
|
:items="[
|
|
{
|
|
value: 'unknown',
|
|
label: '⭕',
|
|
},
|
|
{
|
|
value: 'male',
|
|
label: '♂️ Laki-laki',
|
|
},
|
|
{
|
|
value: 'female',
|
|
label: '♀️ Perempuan',
|
|
},
|
|
{
|
|
value: 'other',
|
|
label: '⚧️ Lainnya',
|
|
},
|
|
]"
|
|
default="unknown"
|
|
/>
|
|
|
|
<ButtonElement
|
|
name="submit"
|
|
button-label="Submit"
|
|
:submits="true"
|
|
align="right"
|
|
/>
|
|
</Vueform>
|
|
</div>
|
|
<span>{{ data }}</span>
|
|
</template>
|