让 vuejs 组件等待变量可用

Posted 2023-02-22

【中文标题】让 vuejs 组件等待变量可用

【英文标题】：make vuejs component wait for the variable to become available

【发布时间】：2019-11-27 13:28:26

【问题描述】：

我有一个 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>

【参考方案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>

【参考方案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() 方法可能正是您想要的。

【讨论】：

谢谢，这可以解决错误。但我的主要问题是等待变量更改然后显示它们或在此之前有一个占位符。至于总线，我正在使用不同的方法检查它是否在线，bus.on('online', () => console.log('BusMQ Online')); bus.connect();

哦，好吧，我明白了；总线上线后，availableResources 准备好了吗？还是在加载所有资源之前上线？

这就是问题所在，他们不是，大约需要 10-20 秒。加载可用资源。一旦他们这样做了，他们就会在页面上显示一半时间，另一半页面保持空白。

我想我的解决方案没有反应性地检测到每个跑步者的变化......你试过使用深度观察者吗？它会检测跑步者的嵌套属性变化。

我试过观察计算的值，然后重新分配变量，但效果不大。