Vue二维数组渲染为空

Question

​
在vue中我先是请求了二维数组daka的数据，然后把二维数组daka进行渲染，显示整个数组都是空的，可是在获取daka数据时打印出来的不是空，为什么会这样。

这是我的代码

<template>
<div>
{{daka}}
</div>
</template>

<script>
export default {
  data() {
    return {
      daka: [[], [], []],
    }
  },
  async mounted() {
    //获取签到周/月/总榜
    let { data: result } = await this.$API.reqDakaRank();
    if (result.code === 200) {
      for (var i in result.data) this.daka[i] = result.data[i];
      console.log(this.daka[0][0]);
    }
    else {
      this.elalert('error', '获取签到榜信息失败!');
    }
  }
}
</script>


​

Answer 1

在Vue中，数据的渲染是异步的。这意味着在mounted生命周期钩子函数中获取到的数据可能还没有被完全渲染到页面上。所以，当你打印出daka数据时，它可能已经被正确地赋值了，但是在页面上还没有显示出来。
 
为了解决这个问题，你可以在模板中使用v-if指令来判断daka数组是否有数据，只有当数组有数据时才进行渲染。例如：

<template>
  <div v-if="daka[0].length > 0">
    <!-- 渲染daka数组的代码 -->
  </div>
</template>

这样，当daka数组有数据时，才会渲染该部分代码，确保数据已经被完全渲染到页面上。
 
另外，你也可以使用Vue的watch属性来监听daka数组的变化，一旦数组有数据，就执行相应的操作。例如：

export default {
  data() {
    return {
      daka: [[], [], []],
    }
  },
  watch: {
    daka: {
      handler(newVal) {
        if (newVal[0].length > 0) {
          // 执行相应的操作
        }
      },
      deep: true,
    },
  },
  async mounted() {
    // 获取签到周/月/总榜
    let { data: result } = await this.$API.reqDakaRank();
    if (result.code === 200) {
      for (var i in result.data) this.daka[i] = result.data[i];
      console.log(this.daka[0][0]);
    }
    else {
      this.elalert('error', '获取签到榜信息失败!');
    }
  }
}

通过watch属性，当daka数组有数据时，就会执行相应的操作。这样可以确保在数据完全渲染到页面上后再进行相应的操作。
 
如若有用，还望博友采纳！