[Vuejs]-Make vuejs component wait for the variable to become available

by

0👍

✅

It wasn’t so much issue with the listing, as it was update function only getting called once in a minute. The final code is for listing runner is bellow.

<template>
  <b-col>
    <b-table v-if="runnersTable.length > 0" striped hover :items="runnersTable"></b-table>
  </b-col>
</template>

<script>
const fileSize = require("filesize");
export default {
  name: "RunnersList",
  props: {
    runners: Array
  },
  data() {
    return {
      haveResourcesLoaded: false
    };
  },
  mounted() {},
  computed: {
    runnersTable() {
      const runnerItems = [];
      for (const runner of this.runners) {
        const newItem = {
          id: runner.id,
          isPublic: runner.marathon.isPublic,
          AvailableCpu: runner.availableResources.cores,
          AvailableMemory: fileSize(runner.availableResources.memory)
        };
        runnerItems.push(newItem);
      }
      return runnerItems;
    }
  }
};
</script>

0👍

This is not a really aesthetic solution, but here is a quick workaround:

in your template, add this v-if condition:

<b-table v-if="haveResourcesLoaded" striped hover :items="formatRunners"></b-table>

then in your computed properties, add the corresponding one:

haveResourcesLoaded() {
  if (this.runners.length > 0) {
    return this.runners[0].availableResources !== undefined
  }
  return false
}

If you need to do it in a better and more controlled way, you should take a look at the documentation, the bus.isOnline() method might be what you’re looking for.

Leave a comment