I have two Vue components in my PHP file: "application" and "vn" component. I am trying to fetch {{obj.vacancies_left}} from the "vn" component and use it in the "application" component. However, I keep getting an undefined variable error. I attempted to retrieve it using getElementById but it still returns as undefined.
Application Vue Component
var application = new Vue({
el: '#engineerlist',
data: {
engineer: [],
allData: '',
actionButton:'Enrol',
courseID: '',
},
methods:{
decreaseVacancy:function() {
axios.post('http://localhost/admin/decreaseVacancies.php',{
action:'delete',
CourseID: '101'
}).then(function(response){
var vacancy = document.getElementById("vacanciesleft").value;
console.log(vacancy);
alert(response.data.status);
}).catch(function(error) {
console.log(error);
});
}
}
});
VN Vue Component
var vn= new Vue({
el: '#courseInfo',
data: {
courses: []
},
created: function() {
axios.get('http://localhost/SPM-Group-3/admin/getSoftware.php')
.then(response => {
return_objs = response.data
for (obj of return_objs) {
this.courses.push(obj)
}
})
.catch(error => {
this.courses = [{ value: 'There was an error: ' + error.message }]
})
}
});
I want to access the {{obj.vacancies_left}} in the "application" Vue component's "decreaseVacancy" function.
<div v-for="obj in courses" v-bind:value="obj">
<h2 class="title">{{obj.courseID}}</h2>
<h3 class="title">{{obj.courseName}}</h3>
<p class="text">{{obj.description}}</p>
<b>Total vacancies: </b> {{obj.vacancies}}<br>
<b ref="vacanciesleft">Number of vacancies left: </b> <span id="vacanciesleft">{{obj.vacancies_left}}</span>
</div>