I am currently developing a VUE application that includes displaying a team table with information fetched from the backend using axios and django rest_framework. Everything is functioning properly.
However, I encountered an issue when clicking on "new category" which opens a modal with a form. Upon submission of the form, the "submitHandler" function is supposed to be triggered to send the form data to the backend using axios for posting. Unfortunately, I am unable to retrieve the form data within this function, which is necessary for the POST request.
I attempted using v-model on the modal form, but it resulted in a reference error.
Any assistance or guidance on resolving this issue would be greatly appreciated.
The modal component:
<script setup>
import { defineProps, defineEmits, ref } from "vue";
import { onClickOutside } from '@vueuse/core'
const offset = 6
const props = defineProps({
isOpen: Boolean,
isTest: String,
Categorie: String,
modalAction: String,
});
const emit = defineEmits(["modal-close"]);
const target = ref(null)
onClickOutside(target, () => emit('modal-close'))
</script>
<!-- The template code was not altered -->
And the corresponding view:
<script setup>
import { ref } from "vue";
import ModalComponent from "../components/ModalComponent.vue";
import axios from 'axios'
// Additional logic remains unchanged
</script>
<!-- The template code was not altered -->
</template>
<script>
// Additional script logic remains unchanged
</script>