Question

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

错误是：[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组件等待变量变为可用

2 个答案: