74 lines
2.0 KiB
Vue
74 lines
2.0 KiB
Vue
<template>
|
|
<form @submit.prevent="submitForm">
|
|
<div>
|
|
<label for="name">Student Name</label>
|
|
<input v-model="student.name" type="text" id="name" required />
|
|
</div>
|
|
<div>
|
|
<label for="class_id">Class</label>
|
|
<select v-model="student.class_id" id="class_id" required>
|
|
<option value="" disabled>Select a class</option>
|
|
<option v-for="classItem in classes" :key="classItem.id" :value="classItem.id">
|
|
{{ classItem.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="email">Email</label>
|
|
<input v-model="student.email" type="email" id="email" required />
|
|
</div>
|
|
<div>
|
|
<label for="phone">Phone</label>
|
|
<input v-model="student.phone" type="tel" id="phone" required />
|
|
</div>
|
|
<!-- Add other form fields here -->
|
|
|
|
<button type="submit">Save Student</button>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useDirectus } from '@/composables/useDirectus'
|
|
|
|
const { fetchCollection } = useDirectus()
|
|
|
|
const student = ref({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
class_id: null, // Store selected class ID
|
|
})
|
|
|
|
const classes = ref([]) // Array to store class options
|
|
|
|
onMounted(async () => {
|
|
// Fetch the available classes from Directus
|
|
classes.value = await fetchCollection('classes')
|
|
})
|
|
|
|
const submitForm = async () => {
|
|
// Code to handle form submission, create new student
|
|
const newStudent = await createItem('students', student.value)
|
|
if (newStudent) {
|
|
console.log('Student added successfully:', newStudent)
|
|
}
|
|
}
|
|
|
|
|
|
import { ref, onMounted } from 'vue'
|
|
import { useDirectus } from '~/composables/useDirectus'
|
|
|
|
const { getItems } = useDirectus()
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const response = await getItems('classes') // 'classes' is the collection name
|
|
classes.value = response
|
|
} catch (err) {
|
|
console.error('Failed to fetch classes:', err)
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|