0
コンポーネントメソッドでajax経由でデータセットをループバックするにはどうすればよいですか？問題は、コンポーネントmounted（）のループを実行するメソッドを呼び出そうとすると、データがまだ存在しないということです。関数を実行するためにajaxデータが到着するのを待つように私のvueコンポーネントにどのように伝えることができますか？子コンポーネントの親データ（Ajax経由で設定）のループ
Vue.component('sidebar', {
props: ['people'],
template: `
<div id="sidebarContain" v-if="this.people">
<div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id">
{{person.first_name + ' ' + person.last_name}}
</div>
</div>
`,
methods: {
isCheckedIn(person) {
return person.reg_scan == null ? true : false;
},
displayName() { //this is the function I want to run when ajax data is done and passed from parent to child
for (var i = 0; i < this.people.length; i++) {
console.log(this.people[i]);
}
}
},
mounted() {
this.displayName();
}
});
var app = new Vue({
el: '#main',
data: {
people: []
},
methods: {
loadPeople() {
$.ajax({
method: 'POST',
dataType: 'json',
url: base_url + 'users/getParticipants/' + event_id
}).done(data => {
this.people = data;
});
},
setRefresh() {
setInterval(() => {
console.log("Getting People");
this.loadPeople();
}, 10000);
}
},
mounted() {
this.loadPeople();
this.setRefresh();
}
});<div id="app">
<sidebar :people="people"></sidebar>
</div>