quasar從0.x版本開始使用,后來升級到1.x,現(xiàn)在最新版本已經(jīng)是2.0.3版本了。版本之間差異比較大,本想將0.x版本開發(fā)的項目升級到1.x版本的,發(fā)現(xiàn)差異實在太大,需要修改的內(nèi)容太多,無奈放棄。
后來嘗試用1.x版本開發(fā)一個新項目,本以為手到擒來的事情,但被幾個小坑來了個下馬威:
1號坑、表格組件數(shù)據(jù)綁定:data VS? :rows
需求:表格中能夠顯示給定的數(shù)據(jù)。
中文官網(wǎng)上文檔標(biāo)注的語法是這樣
? ? 剛開始感覺挺簡單,這個q-table組件語法和以前版本一樣嘛,但按照以上語法執(zhí)行后,數(shù)據(jù)表中始終出不來數(shù)據(jù),百思不得其解。
? ? 平時比較習(xí)慣看中文的官網(wǎng),所以我查看的是中文版官網(wǎng)。后來我嘗試到英文版官網(wǎng)上看了一下,驚訝的發(fā)現(xiàn)這上面的語法竟然是:
按照以上語法,我修改為:rows,問題迎刃而解,表格中的數(shù)據(jù)如期而至。
不禁感慨,這是quasar有意折騰我們這些開發(fā)者的嗎!
吃一虧長一智,以后只能盡量參考英文資料。
2號坑、表格記錄選中selected
需求:表格中每行記錄前出現(xiàn)復(fù)選框,可以單選或者多選數(shù)據(jù)記錄。
中文官網(wǎng)上標(biāo)注的語法是這樣:
英文官網(wǎng)上標(biāo)注的語法是這樣:
經(jīng)過確認,:selected.sync="selected",直接就出現(xiàn)'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead vue/no-depreca這個語法錯誤。如果修改成和0.x版本一致的語法:selected="selected",雖然沒有再出現(xiàn)語法錯誤,但無法選擇復(fù)選框。
而按照v-model:selected="selected",就能正常選擇每條記錄了。
忍不住吐槽一個:好不容易積累出來的經(jīng)驗反而會害死人啊!
3號坑、跨域訪問
需求:quasar調(diào)用后端服務(wù)。
后端服務(wù)和前端服務(wù)在不同的端口、不同的IP地址,但在調(diào)用的時候出現(xiàn)No
'Access-Control-Allow-Origin' header is present on the requested resource
的錯誤,這是說明當(dāng)前不支持跨域訪問。
于是按照文檔中要求,先是通過配置proxy,然后嘗試修改header,但始終還是無法訪問后端服務(wù),出現(xiàn)上面那個跨域錯誤。
后來沒招了,由于后端用的是koa2,在后端增加安裝了koa2-cors模塊,然后。。。。跨域問題就解決了!!!