二维数组/多维数组在 template 渲染为空的问题？

Z时代
2024-03-13
分类：IT

<template>
  <div>
    <!-- 渲染为：空 -->
    {{array[0]}}
  </div>
</template>
<script>
export default {
  data() {
    return {
      array: [],
    }
  },
  methods: {
    // 获取数据
    async getData() {
      const res = await this.apiGetData()
      // this.array = [] // 解决方式：随便赋个值就行。不知道为什么，求解释
      this.array[0] = res
      console.log(this.array[0]) // 输出为：[1]
    },
    // 模拟请求数据
    apiGetData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([1])
        }, 1000)
      })
    },
  },
  created() {
    this.getData()
  },
}</script>