94 lines
3.0 KiB
Vue
94 lines
3.0 KiB
Vue
<template>
|
|
<div>
|
|
<v-img src="/images/veg.jpg">
|
|
|
|
<template>
|
|
<v-container>
|
|
<v-row class="py-5">
|
|
<v-title class="font-weight-bold white--text" >CONTACT US<br><v-icon class="black--text">mdi-whatsapp</v-icon>- 8597894293</v-title>
|
|
<v-col md="12">
|
|
|
|
<template>
|
|
<v-card outlined id="position" width="500" class="pa-5 mx-auto mt-5" color="grey lighten-3">
|
|
<v-form ref="form" v-model="valid" lazy-validation>
|
|
<v-text-field v-model="name" :counter="10" :rules="nameRules" label="Name"
|
|
required>
|
|
</v-text-field>
|
|
<v-text-field label="P-Number" required>
|
|
</v-text-field>
|
|
|
|
<v-text-field v-model="email" :rules="emailRules" label="E-mail" required>
|
|
</v-text-field>
|
|
|
|
|
|
<v-textarea color="cyan" label="Input Massege"></v-textarea>
|
|
|
|
<v-checkbox v-model="checkbox"
|
|
:rules="[v => !!v || 'You must agree to continue!']" label="Do you agree?"
|
|
required></v-checkbox>
|
|
<!--
|
|
<v-btn :disabled="!valid" color="success" class="mr-4" @click="validate">
|
|
Submit
|
|
</v-btn> -->
|
|
|
|
|
|
</v-form>
|
|
</v-card>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</v-col>
|
|
|
|
</v-row>
|
|
</v-container>
|
|
|
|
</template>
|
|
</v-img>
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data: () => ({
|
|
valid: true,
|
|
name: '',
|
|
nameRules: [
|
|
v => !!v || 'Name is required',
|
|
v => (v && v.length <= 10) || 'Name must be less than 10 characters',
|
|
],
|
|
email: '',
|
|
emailRules: [
|
|
v => !!v || 'E-mail is required',
|
|
v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
|
|
],
|
|
select: null,
|
|
items: [
|
|
'Item 1',
|
|
'Item 2',
|
|
'Item 3',
|
|
'Item 4',
|
|
],
|
|
checkbox: false,
|
|
}),
|
|
|
|
methods: {
|
|
validate() {
|
|
this.$refs.form.validate()
|
|
},
|
|
reset() {
|
|
this.$refs.form.reset()
|
|
},
|
|
resetValidation() {
|
|
this.$refs.form.resetValidation()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
|
|
</style> |