57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<script setup>
|
|
import { reactive, watch } from 'vue';
|
|
|
|
const customer = reactive({
|
|
name: '',
|
|
});
|
|
|
|
watch(() => customer.name);
|
|
</script>
|
|
|
|
<template>
|
|
<QPage class="q-pa-md">
|
|
<QCard class="q-pa-md">
|
|
<QForm @submit="onSubmit" @reset="onReset" class="q-gutter-md">
|
|
<QInput
|
|
filled
|
|
v-model="customer.name"
|
|
label="Your name *"
|
|
hint="Name and surname"
|
|
lazy-rules
|
|
:rules="[(val) => (val && val.length > 0) || 'Please type something']"
|
|
/>
|
|
|
|
<QInput
|
|
filled
|
|
type="number"
|
|
v-model="age"
|
|
label="Your age *"
|
|
lazy-rules
|
|
:rules="[
|
|
(val) => (val !== null && val !== '') || 'Please type your age',
|
|
(val) => (val > 0 && val < 100) || 'Please type a real age',
|
|
]"
|
|
/>
|
|
|
|
<div>
|
|
<QBtn label="Submit" type="submit" color="primary" />
|
|
<QBtn
|
|
label="Reset"
|
|
type="reset"
|
|
color="primary"
|
|
flat
|
|
class="q-ml-sm"
|
|
/>
|
|
</div>
|
|
</QForm>
|
|
</QCard>
|
|
</QPage>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
width: 100%;
|
|
max-width: 60em;
|
|
}
|
|
</style>
|