I am currently facing an issue with populating my events array from a meteor call so that it appears in a select list. The 'get.upcoming' Meteor function returns an array of JSON objects, but it seems like the select list is being rendered before the event array is fully populated.
Is there a way to update or delay the rendering of the select box until after the events array has been completely populated?
<template>
<div class="container">
<select v-model='eventId'>
<option v-for='event in events'>{{JSON.stringify(event)}}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
eventId: "",
events: [],
}
},
created() {
this.getItems();
},
methods: {
getItems() {
console.log("retrieving items");
Meteor.call('get.upcoming', (err, res) => {
if (err) {
console.log(err);
} else {
this.events = res;
console.log(this.events);
}
})
}
}
}
</script>
<style>
</style>