[Vuejs]-Vue select list rendering before getting data from Meteor callback

by

0👍

Use this.events = res; in your Meteor call callback function to save the response to events.

Also, use an arrow function for your callback so that it can access the Vue instance via this.

getItems() {
  console.log('getting items');
  Meteor.call('get.upcoming', (err, res) => {
    if (err) {
      console.log(err);
    } else {
      this.events = res;
      console.log(this.events);
    }
  })
}
👤Ikbel

0👍

  1. To rerender the select box, simply just setting the data array which is two-way binded to the select box will rerender the given select box. All registered variables in the data() method in a Vue template definition are available as template class variables once the web page loads, with its contents optionally two-way binded to components.

if (!error) this.events = newEvents

  1. If you would like to show the select box only after the JSON objects will be received from the Meteor method and populated into the events array, then simply set a Vue conditional binding to a boolean to show the HTML DOM element after the data is loaded.
<template>
  <select v-if="dataLoaded"> </select>
</template>

<script>
return {
  data() {
    return {
      dataLoaded: false
    }
  }

  asyncMethod() { this.dataLoaded = true; }
};
</script>
👤Dranithix

Leave a comment