Vue中如何从另一个组件获取对象的vacancies_left属性值

首先先说明你现有代码的问题：

• span标签没有value属性，你用document.getElementById("vacanciesleft").value肯定获取不到值，要获取文本内容应该用.innerText或者.textContent
• 你在v-for循环里给多个元素设置了同一个id="vacanciesleft"，HTML规范要求id必须唯一，所以getElementById只能拿到第一个匹配的元素，不符合你要取对应课程剩余名额的需求
• 直接操作DOM不是Vue的推荐用法，你两个Vue实例都是全局声明的，直接访问实例数据更可靠

最简实现方案 #

因为你的两个Vue实例vn和application都是挂载在window下的全局变量，直接在application的方法里访问vn实例的courses数据即可，根据你请求里传的CourseID匹配对应的课程对象，就能拿到剩余名额，修改后的代码如下：

var application = new Vue({
    el: '#engineerlist',
    data: {
        engineer: [],
        allData: '',
        actionButton:'Enrol',
        courseID: '101', // 建议把courseID存在data里统一维护
    },
    methods:{
        decreaseVacancy:function() {
            const targetCourseID = this.courseID
            axios.post('http://localhost/admin/decreaseVacancies.php',{
                action:'delete',
                CourseID: targetCourseID
            }).then((response) => { // 用箭头函数避免this指向问题
                // 从vn实例的courses数组中匹配对应ID的课程
                const targetCourse = vn.courses.find(item => item.courseID == targetCourseID)
                if(targetCourse) {
                    const vacancy = targetCourse.vacancies_left
                    console.log(vacancy)
                } else {
                    console.log('未找到对应课程，请确保课程数据已加载完成')
                }
                alert(response.data.status);
            }).catch(function(error) {
                console.log(error);
            });
        }
    } 
});

注意事项 #

• 要确保vn实例的getSoftware请求已经完成、courses数组已经赋值后，再调用decreaseVacancy方法，否则会找不到对应课程
• 如果需要更解耦的跨组件通信方式，你可以用Vue的事件总线（Event Bus）方案，创建一个空的Vue实例作为事件中心，两个实例通过这个中心触发和监听事件传递数据，适合更复杂的多组件通信场景

内容的提问来源于stack exchange，提问作者Pleasehelpme