无法访问嵌套元素并在 Vue 模板中应用函数？

Question

我是 Web 开发的新手，遇到了一个我无法解决的问题... 我正在使用 Vuejs、Express、MongoDB 和 Fetch API...

在我的脚本中，我从本地服务器获取数据：

  mounted() {
    fetch("http://localhost:5000/api/" + this.$route.params.id)
      .then((res) => res.json())
      .then((data) => {
              this.data = data
              console.log(this.data.telegram.length)
      })
      .catch((err) => console.log(err.message))
  }

console.log 工作正常。

数据是这样返回的：

{ "_id": "6061ee831114fc4c211678e6", "path": "mypath", "telegram": [ { "date": "2021-03-21T22:00:00.708Z", "followers": 2188 }, { "date": "2021-03-22T18:40:04.751Z", "followers": 2195 } ], "__v": 0 }

然后数据存储为：

  data() {
    return {
      data: []
    }
  }

首先，我对我的数据格式感到惊讶。我相信它会以 JavaScript 格式出现，这意味着键上没有引号（“”）......我尝试 JSON.parse 响应，但它返回一个错误，就像它已经被解析一样。正常吗？

另外，在我的模板中，我无法访问此“数据”的属性。

例如：

<p>{{data.telegram[0]}}</p>

或

<p>{{data.telegram.length}}</p>

正在返回 'Uncaught (in promise) TypeError: Cannot read property '0' of undefined' 和 'Uncaught (in promise) TypeError: Cannot read property 'length' of undefined'。

好像有什么我不太明白...

任何帮助表示赞赏！

Answer 1

data.telegram 是 undefined，直到您的挂载方法从服务器获得响应。我建议你用计算属性替换你的模板代码来检查你的数据是否有价值：

<template>
  <p>{{mydata}}</p>
  <p>{{telegramLen}}</p>
</template>

<script>
export default {
  computed: {
     mydata() {
        if (this.data != [])
           return this.data.telegram[0]
        return "No data"
     },
     telegramLen() {
        if (this.data.length > 0)
            return this.data.telegram.length
        return 0
     }
  }
}
</script>