forked from verdnatura/salix-front
53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<script setup>
|
|
import { reactive, watch } from 'vue'
|
|
|
|
const customer = reactive({
|
|
name: '',
|
|
});
|
|
|
|
watch(() => customer.name, () => {
|
|
console.log('customer.name changed');
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-page class="q-pa-md">
|
|
<q-card class="q-pa-md">
|
|
<q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
|
|
<q-input
|
|
filled
|
|
v-model="customer.name"
|
|
label="Your name *"
|
|
hint="Name and surname"
|
|
lazy-rules
|
|
:rules="[val => val && val.length > 0 || 'Please type something']"
|
|
/>
|
|
|
|
<q-input
|
|
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>
|
|
<q-btn label="Submit" type="submit" color="primary" />
|
|
<q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-page>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
width: 100%;
|
|
max-width: 60em;
|
|
}
|
|
</style>
|