Tengo 2 componentes vue en mi archivo PHP: aplicación y componente vn. Quiero obtener {{obj.vacancy_left}} del componente vn y llamarlo en el componente de la aplicación. ¿Cómo debería hacerlo? Sigo obteniendo una variable indefinida. Intenté obtenerlo por getElementById pero me muestra una variable indefinida.
componente de aplicación vue
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); }); } } });
componente vn vue
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 }] }) } });
Este es el {{obj.vacancy_left}} que quiero recuperar en la función de disminución de vacantes del componente vue de la aplicación
<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>
Compartir datos entre los componentes de Vue.
$emit('my-event')
. Ver escuchar eventos de componentes secundariosSi usa Vuex , diría que es la mejor manera de compartir datos entre componentes no relacionados.