quasar1.X使用過程中的幾個坑

quasar從0.x版本開始使用,后來升級到1.x,現在最新版本已經是2.0.3版本了。版本之間差異比較大,本想將0.x版本開發的項目升級到1.x版本的,發現差異實在太大,需要修改的內容太多,無奈放棄。

后來嘗試用1.x版本開發一個新項目,本以為手到擒來的事情,但被幾個小坑來了個下馬威:

1號坑、表格組件數據綁定:data VS? :rows

需求:表格中能夠顯示給定的數據。

中文官網上文檔標注的語法是這樣

? ? 剛開始感覺挺簡單,這個q-table組件語法和以前版本一樣嘛,但按照以上語法執行后,數據表中始終出不來數據,百思不得其解。
? ? 平時比較習慣看中文的官網,所以我查看的是中文版官網。后來我嘗試到英文版官網上看了一下,驚訝的發現這上面的語法竟然是:

按照以上語法,我修改為:rows,問題迎刃而解,表格中的數據如期而至。
不禁感慨,這是quasar有意折騰我們這些開發者的嗎!
吃一虧長一智,以后只能盡量參考英文資料。

2號坑、表格記錄選中selected

需求:表格中每行記錄前出現復選框,可以單選或者多選數據記錄。

中文官網上標注的語法是這樣:

英文官網上標注的語法是這樣:

經過確認,:selected.sync="selected",直接就出現'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead vue/no-depreca這個語法錯誤。如果修改成和0.x版本一致的語法:selected="selected",雖然沒有再出現語法錯誤,但無法選擇復選框。

而按照v-model:selected="selected",就能正常選擇每條記錄了。

忍不住吐槽一個:好不容易積累出來的經驗反而會害死人啊!

3號坑、跨域訪問

需求:quasar調用后端服務。

后端服務和前端服務在不同的端口、不同的IP地址,但在調用的時候出現No

'Access-Control-Allow-Origin' header is present on the requested resource

的錯誤,這是說明當前不支持跨域訪問。

于是按照文檔中要求,先是通過配置proxy,然后嘗試修改header,但始終還是無法訪問后端服務,出現上面那個跨域錯誤。

后來沒招了,由于后端用的是koa2,在后端增加安裝了koa2-cors模塊,然后。。。。跨域問題就解決了!!!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容