vue <template></template>初次渲染时需要用到异步数据应该怎么处理？

Question

<template>
    {{handleMachineRoom(scope.row.idcCode)}}
</template>

<script>
computed: {
      machineRoom(){
        return this.$store.state.machineRoom;
      }
    },
    
mounted() {
    if(this.machineRoom.length > 0)return;
    this.$store.dispatch('onGetMachineRoom')
}
methods: {
    handleMachineRoom(i){
        let f = {};
        if(this.machineRoom.length > 0){
          f = this.machineRoom.find(item => {
            return item.idc_code === i;
          })
        }
        return f.idc_name?f.idc_name:'';
      },

}
</script>

如上图，初次渲染时有机房代码，需要在机房列表中匹配对应的中文名称，但是机房列表可能为空，这时会去调用action中的方法获取，但是这是异步的过程，当渲染完成时，handleMachineRoom处理结果为空，等机房列表获取时已经晚了，请问这个情况应该怎么处理？

Answer 1

vue的几个生命周期函数应该可以帮到你点击查看vue生命周期

Answer 2

handleMachineRoom拿到computed里面

Answer 3

scope.row.idcCode 作为计算属性，当异步返回值后，会自动变化

Answer 4

初始的时候隐藏，有数据再显示，用 v-if 判断一下。