让 vuejs 组件等待变量可用

Question

我有一个 VueJS 组件，它将数组的内容列出到页面中。 runner.availableResources.cores 和 runner.availableResources.memory 来自总线使用busmq npm 包创建。它们需要一段时间才能可用，大约需要 15 秒，具体取决于 IO 缓冲区，因此在页面呈现时不会立即可用。

错误是：[Vue warn]: Error in render: "TypeError: Cannot read property 'cores' of undefined"

如何让 Vue 不断检查值是否可用？

<template>
  <b-col>
    <b-table striped hover :items="formatRunners"></b-table>
  </b-col>
</template>

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

Answer 1

列表没有太大问题，因为它是更新功能，每分钟只调用一次。最终代码用于列出跑步者如下。

<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>

Answer 2

这不是一个真正美观的解决方案，但这里有一个快速的解决方法：

在您的模板中，添加此v-if 条件：

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

然后在你的计算属性中，添加相应的：

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

如果您需要以更好和更可控的方式进行操作，您应该查看documentation，bus.isOnline() 方法可能正是您想要的。