时间戳

首页 > 解决方案 > 让 vuejs 组件等待变量可用

arrays - 让 vuejs 组件等待变量可用

问题描述

我有一个 VueJS 组件，它将数组的内容列出到页面中。runner.availableResources.cores并runner.availableResources.memory来自使用busmqnpm 包创建的总线。它们需要一段时间才能可用，大约需要 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>

标签： arraysfor-loopvue.js

解决方案

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

在您的模板中，添加以下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
}

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

推荐阅读