天天看點

Vue.js之元件及其易錯點

今天,在做一個關于vue的demo的時候,發現vue的元件寫法出現了錯誤,剛開始一直沒看出來,經過我的一番查閱,才發現了這個錯誤,希望大家能夠引以為戒,不要犯類似的錯誤!

錯誤源碼:

Vue.js之元件及其易錯點

在元件裡面的資料,我直接跟其他時候一樣,直接傳回一個json對象,結果發現調試的時候,報如下錯誤:

Vue.js之元件及其易錯點

它的意思是:data這個選項必須是一個函數!

接着,我把它改成了一個函數,如下:

Vue.js之元件及其易錯點

調試後,發現還是報錯 !

Vue.js之元件及其易錯點

它提示我說:data函數必須傳回一個對象!而我傳回的卻是一個字元串!

于是,我改成了傳回一個json對象:

Vue.js之元件及其易錯點

現在結果終于正确啦!

Vue.js之元件及其易錯點

Vue元件裡面放的資料必須是一個函數,并且也不能傳回一個類似于字元串,或者return 1這樣的值,它必須要傳回一個對象(通常來說是JSON對象)。

繼續閱讀