Untitled

<template>
    <div>
        <v-container fluid>
            <v-row>
                <v-col cols="2">
                    <v-text-field v-model="FirstName" label="First Name" outlined dense></v-text-field>
                </v-col>
                <v-col cols="2">
                    <v-text-field v-model="LastName" label="Last Name" outlined dense></v-text-field>
                </v-col>
                <v-col cols="4">
                    <v-text-field v-model="Course" label="Course" outlined dense></v-text-field>
                </v-col>
                <v-col cols="3">
                    <p>Employee Name: {{ FirstName }} {{ LastName }}</p>
                    <p>Department: {{ selectedDepartment }}</p>
                    <p>section: {{ selectedSection }}</p>
                    <p>is Married: {{ isChecked ? 'yes' : 'no' }} </p>
                </v-col>
                <v-col cols="2">
                    <v-select v-model="selectedDepartment" :items="dept" label="Department" outlined dense
                        placeholder="Select an option"></v-select>
                </v-col>
                <v-col cols="2">
                    <v-select v-model="selectedSection" :items="sec" label="Section" outlined dense
                        placeholder="Select an option"></v-select>
                </v-col>
                <v-col cols="2">
                    <v-checkbox v-model="isChecked" label="Is Married"></v-checkbox>
                </v-col>
                <v-col cols="3">
                    <v-text-field v-model="School" label="School Name" outlined dense></v-text-field>

                </v-col>
                <v-col cols="12">
                    <v-text-field v-model="contactNumber" label="Contact Number" outlined dense></v-text-field>
                </v-col>
                <v-col cols="12" md="6">
                    <p>Gender</p>
                    <v-radio-group v-model="gender">
                        <v-radio label="Male" value="Male"></v-radio>
                        <v-radio label="Female" value="Female"></v-radio>
                    </v-radio-group>
                </v-col>
            </v-row>

        </v-container>
    </div>
</template>

<script>
export default {
    data: () => ({
        FirstName: '',
        LastName: '',
        isChecked: false,
        contactNumber: '',
        gender: '',
        selectedDepartment: null,
        dept: ['IHS', 'SSD'],
        selectedSection: null,
        sec: ['SDA', 'SDB', 'SDL', 'SDM']
    }),

}
</script>

<style scoped>
/* Add any custom styles here */
</style>