Vue.js VueJS-在模板中显示异步数据

我有以下代码：

<template>
  <div>
    <hot-table licenseKey='non-commercial-and-evaluation' :data="covertDataToTableReadable" colHeaders="true" width="600" height="300">
      <hot-column title="Employee:">
      </hot-column>
      <hot-column title="Date:">
      </hot-column>
      <hot-column title="Project name:">
      </hot-column>
      <hot-column title="Task Link">
      </hot-column>
      <hot-column title="Component">
      </hot-column>
      <hot-column title="Description">
      </hot-column>
      <hot-column title="Time to complete">
      </hot-column>
    </hot-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { HotTable, HotColumn } from '@handsontable/vue'

export default {
  data: function () {
    return {
      data: [],
    }
  },
  computed: {
    ...mapGetters('projectsPage', {
      headers: 'getTableHeaders',
      filteredTableData: 'getFilteredTableData',
      submitStatus: 'getSubmitStatus'
    }),
    loaded () {
      return this.$store.state.projectsPage__initializedTable
    },
    covertDataToTableReadable () {
      const data = []
      const filteredData = this.filteredTableData.map(item => {
        data.push([item.full_name, item.created_on, item.project_name, item.task_link, item.component_name, item.task_description, item.hours_spent])
      })

      if (data) {
        return data
      }
    }
  },
  components: {
    HotTable,
    HotColumn
  },
  methods: {
    transformAsanaLinkToAtag (asanaLink) {
      if (!asanaLink) {
        asanaLink = ''
      }
      asanaLink = asanaLink.trim()
      let regex = /^https?:\/\/[^\s]+$/g
      if (regex.test(asanaLink)) {
        return '<span><a target="_blank" href=' + asanaLink + '>Task URL</a><i aria-hidden="true" class="v-icon material-icons info--text">open_in_new</i></span>'
      } else {
        return '<span>' + asanaLink + '</span>'
      }
    },
    addClasses (data) {
      let classes = 'default-row'
      if (data.is_billable === 'Yes') {
        classes += ' billable-row'
      }
      if (data.hasOwnProperty('deleted_on') && data.deleted_on !== null) {
        classes += ' deleted-row'
      }
      return classes
    }
  }
}
</script>

<style>
  .default-row {
    border-left: 5px solid #808080;
  }

  .billable-row {
    border-left: 5px solid #4caf50;
  }

  .deleted-row {
    border-left: 5px solid #FF0000;
    opacity: 0.3;
  }
</style>

从“vuex”导入{mapGetters}
从“@handsontable/vue”导入{HotTable，HotColumn}
导出默认值{
数据：函数（）{
返回{
数据：[]，
}
},
计算：{
…映射器（'projectsPage'{
标题：“getTableHeaders”，
filteredTableData:'getFilteredTableData'，
submitStatus:“getSubmitStatus”
}),
加载（）{
返回此。$store.state.projectsPage\uu initializedTable
},
covertDataToTableReadable（）{
常量数据=[]
const filteredData=this.filteredTableData.map（项=>{
data.push（[item.full\u name，item.created\u on，item.project\u name，item.task\u link，item.component\u name，item.task\u description，item.hours\u explored]）
})
如果（数据）{
返回数据
}
}
},
组成部分：{
热桌，
热柱
},
方法：{
转换asanalinktotag（asanaLink）{
如果（！asanaLink）{
asanaLink=''
}
asanaLink=asanaLink.trim（）
让正则表达式=/^https？：\/\/[^\s]+$/g
if（正则表达式测试（asanaLink））{
返回“在新中打开”
}否则{
返回“”+asanaLink+“”
}
},
添加类（数据）{
让类='默认行'
如果（data.is_bilable===‘Yes’）{
类别+=‘可计费行’
}
if（data.hasOwnProperty（'deleted_on'）&&data.deleted_on！==null）{
类+=“已删除行”
}
返回类
}
}
}
.默认行{
左边框：5px实心#808080；
}
.可计费行{
左边框：5px实心#4caf50；
}
.删除的行{
左边框：5px实心#FF0000；
不透明度：0.3；
}

我正在计算函数

covertDataToTableReadable

中对该变量

filteredTableData

进行一些更改，但是在模板中，我没有得到我修改的数据，因为

filteredTableData

是一个观察者

当我控制台日志

filteredTableData

时，我得到：

如何让Vue等待结果，然后在模板中更新？
如果能更详细地解释它的工作原理，我将不胜感激。
观察者位是正确的。不用麻烦了

我认为您正在变异一个复杂的数据类型
filteredTableData
，Vue无法观察到这一点。
请看

在Vuex中，您应该这样操作：

const i = filteredTableData.length;
const someData = { foo: 'bar' };
Vue.set(filteredTableData, i, someData);


要清楚；不应更改（变异）对象和数组。观察者机制无法正确处理这些变化。
应使用
Vue.set（）
方法应用更改。
我在模板中添加了if check（v-if），该模板显示了在数据到达后渲染模板

代码如下：

<template>
  <div v-if="filteredTableData.length > 0">
    <hot-table licenseKey='non-commercial-and-evaluation' :data="covertDataToTableReadable" colHeaders="true" width="600" height="300">
      <hot-column title="Employee:">
      </hot-column>
      <hot-column title="Date:">
      </hot-column>
      <hot-column title="Project name:">
      </hot-column>
      <hot-column title="Task Link">
      </hot-column>
      <hot-column title="Component">
      </hot-column>
      <hot-column title="Description">
      </hot-column>
      <hot-column title="Time to complete">
      </hot-column>
    </hot-table>
  </div>
</template>

[
   ['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],
   ['2019', 10, 11, 12, 13],
   ['2020', 20, 11, 14, 13],
   ['2021', 30, 15, 12, 13]
],