让 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

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

在您的模板中，添加此 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() 方法可能就是您要找的。

Answer 2

列表并没有太大问题，因为更新功能每分钟只会被调用一次。最终代码用于列出运行程序如下。

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

让 vuejs 组件等待变量可用

make vuejs component wait for the variable to become available

arrays

for-loop

vue.js