In my project, I am working on a feature that involves toggling job offers between visible and invisible using a toggle button. When the page loads, a GET request retrieves the status (true or false) from the database to determine whether the toggle button should be toggled. My goal is to capture the value and ID of the clicked child element so that I can send a request to update the database accordingly (for example, changing from 'invisible' to 'visible' for future page loads).
I have been exploring different approaches, but it seems like I still have some gaps in my understanding. Here is the structure of the parent component:
<template>
<div class="container">
<header>
<navigation-bar role="COMPANY"/>
</header>
<main>
<section class="page-menu">
<CompanyPageSelectorMenu/>
</section>
<section class="job-offers" v-if="jobOffers">
<div class="scroll" id="scrollbar-styling" v-for="jobOffer of jobOffers" :key="jobOffer.id">
<CompanyJobOfferList :functionBold="jobOffer.jobFunction" :amount-per-session="jobOffer.amountPerSession" :functionDescription="jobOffer.jobDescription" :isChecked="jobOffer.visible"/>
</div>
</section>
</main>
</div>
</template>
<script>
import CompanyPageSelectorMenu from "../components/CompanyPageSelectorMenu.vue";
import NavigationBar from "../components/NavigationBar";
import CompanyJobOfferList from "../components/CompanyJobOfferList";
import axios from 'axios';
import {Utils} from "../assets/utils";
export default {
name: "CompanyJobOffer",
components: {NavigationBar, CompanyPageSelectorMenu, CompanyJobOfferList},
data () {
return {
jobOffers: [],
errors: [],
}
},
created() {
let userId = Utils.parseJwt(Utils.getCookie("JWT-token")).userId;
axios.get(`http://localhost:8080/joboffers/` + userId, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': `Bearer ${Utils.getCookie("JWT-token")}`
}
})
.then(response => {
this.jobOffers = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
Within the parent component, a child component is utilized:
<CompanyJobOfferList :functionBold="jobOffer.jobFunction" :amount-per-session="jobOffer.amountPerSession" :functionDescription="jobOffer.jobDescription" :isChecked="jobOffer.visible"/>
The structure of the child component is as follows:
<template>
<div class="container">
<div class="wrap-text">
<span class="function-text-bold"><b>{{ functionBold }}</b></span>
<span class="function-text">{{ functionDescription }}</span>
</div>
<div class="wrap-text">
<span class="amount-text">Aantal toegelaten studenten per sessie</span>
<div class="click-amount">
<button class="remove-hover"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-12v-2h12v2z"/></svg></button>
<span class="function-text">{{ amountPerSession }}</span>
<button class="remove-hover"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h-2v5h-5v2z"/></svg></button>
</div>
</div>
<button>Stel je tijdslot in</button>
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox" v-if="isChecked" checked="isChecked">
<input type="checkbox" v-else>
<span class="slider round"></span>
</label>
<hr>
</div>
</template>
<script>
//import axios from "axios";
export default {
name: "CompanyJobOfferList",
data() {
return {};
},
props: {
functionBold: {
type: String,
required: true,
},
functionDescription: {
type: String,
required: true,
},
amountPerSession: {
type: Number,
required: true,
},
isChecked: {
type: Boolean,
required: true,
},
},
};
</script>
My challenge lies in obtaining the ID of the clicked component and accessing its current value. Should the POST / PUT request be handled in the child or parent component? The decision between the two depends on factors like the number of child components involved. Initially, I believed sending data to the parent component was the way to go due to multiple child components being present. Despite attempting different methods, I have yet to achieve the desired functionality.