[英]How to get object value from another component in vue script?
I have 2 vue component in my PHP file: application and vn component.我的 PHP 文件中有 2 个 vue 组件:应用程序和 vn 组件。 I want to get {{obj.vacancies_left}} from vn component and call it in application component.
我想从 vn 组件中获取 {{obj.vacancies_left}} 并在应用程序组件中调用它。 How should I do it?
我该怎么做? I keep getting undefined variable.
我不断收到未定义的变量。 I tried getting it by getElementById but it shows me undefined variable.
我尝试通过 getElementById 获取它,但它显示了未定义的变量。
application vue component应用程序 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);
});
}
}
});
vn vue component 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 }]
})
}
});
This is the {{obj.vacancies_left}} that I want to retrieve in application vue component decreaseVacancy function这是我想在应用程序 vue 组件 reduceVacancy 函数中检索的 {{obj.vacancies_left}}
<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>
Sharing data across Vue Components.跨 Vue 组件共享数据。
$emit('my-event')
.$emit('my-event')
。 See Listening to Child Components Events If using Vuex , I'd say that is the best way to share data across unrelated components.如果使用Vuex ,我会说这是在不相关的组件之间共享数据的最佳方式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.