init

pages/contact.vue

@@ -0,0 +1,94 @@
+<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>