技術標籤：jsonvueajaxvue.js

Vue在頁面中渲染從axios獲取的JSON資料成功，但console提示undefined

export default {
  async created () {
    let {data: video} = await this.$http.get('/getting/video?id=3')
  },
  components: {
    VideoPlayer
  },
  data () {
    return {
	//注意這裡的video物件
      video: {
      },
    }
  }
}

我以前的習慣是在data裡面寫一個json物件，然後不定義其資料結構是什麼樣的，雖然通過非同步獲取到的json資料能成功賦值給video json物件，但是json物件超過兩層結構，比如：

{
    "id": 3,
    "organizerId": 1,
    "date": "2021-01-22 21:11:32",
    "url": "http://www.kongsama.cn/videos/%E8%B1%AA%E8%B5%8C%E4%B9%8B%E6%B8%8AXX%2002.mp4",
    "title": "狂賭之淵xx 第02集",
    "profile": "良家子女聚集的名門學校，私立百花王學園。君臨這所被賭博所支配的學園頂點的是，支配弱者的人生、甚至對政界財界都擁有影響力的絕對支配者，學生會。然而，學生會長桃喰綺羅莉，突然宣言了學生會的解散及總選舉。"
 
,
    "type": "番劇",
    "playNum": 150,
    "videoComment": null,
    "organizer": {
        "id": 0,
        "date": null,
        "avatar": "http://oss.norza.cn/imgs/avatar/organizer/1/avatar01.jpg",
        "username"
 
: "kongsama",
        "password": null,
        "profile": "time tick away, dream faded away!",
        "fans": 100
    }
}

注意，前提是我沒有給data裡面的video json物件定義資料結構，那麼我video.organizer.avatar去拿資料並渲染到標籤上面，瀏覽器控制檯就會出現undefined錯誤。

之所以會出現這個原因是因為我沒有提前給video json物件定義資料結構。
所以定義好資料結構，再去拿多層結構的json資料就不會報錯了。

而且，如果沒有定義好，idea會提示你“Unresolved variable xxx”。所以要注意了！！！