前言:
因為觀察到vue.js的輕量以及實時更新數據的便捷性,於是新項目便決定使用vue.js2.0以及與之配套的elementui來完成。只是初次接觸新框架,再使用過程中,遇見了各種各樣“奇葩”的問題,在所有人的努力下,幸好該項目已接近尾聲,就此便小談一下自己的收獲吧!
過程:
【使用到的文檔】
https://cn.vuejs.org/v2/guide/syntax.html(vuejs)
http://element.eleme.io/#/zh-CN(elementui)
http://lodashjs.com/docs/(lodash.js:主要用於處理與數組相關的問題)
【遇見的問題集結】
1.select選擇器賦不上值
問題描述:點擊select下拉框,能選到下拉框中的數據,但是卻選不上值,即回顯不上選擇到的數據。
解決方法:原來是版本問題。只需將elementui升級到1.3.0即可。(歷史遺留問題吧~)
2.將后台服務器返回的數據綁定在前台頁面上
問題描述:現存在一個下拉框,但是下拉框的數據是通過后台的一個方法查詢得來並返回給前台,問題就是應該怎樣將數據綁定在該下拉框中呢?
解決方法:使用mouted方法,將后台獲得的數據綁定在該select的model中即可,例如
... mounted() { this.$nextTick(() => { //更新所選組別下拉框數據 apiclient.usergroup_getugname().then(res =>{ //用戶組別下拉框數據 this.filters.s_gid = res; }); }); this.search(); } ...
其中:apiclient.usergroup_getugname()為后台獲取用戶組別下的所有符合條件的數據,this.filters.s_gid為該下拉框的v-model數據。
3.select的校驗不通過
問題描述:選好下拉框,並且賦好值,但是需要進行非空校驗,於是使用官網上的校驗方式(如下),卻總是報錯:“xxx is not a string”
... rules: { name: [//校驗input框 { required: true, message: '請輸入活動名稱', trigger: 'blur' }, { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' } ], region: [//校驗select選擇器 { required: true, message: '請選擇活動區域', trigger: 'change' } ], ... } ...
於是,在將整個select下拉框的值寫成固定的,再使用上面的校驗方法的時候,居然不報錯了。最終更是不知道應該從何下手解決……直到看到這個:
https://github.com/yiminghe/async-validator(適合校驗的文檔)
在這里面,有着詳細的介紹,還有一些我們未曾發現的“小秘密”,這樣問題便迎刃而解
... rules: { name: [//校驗input框 { required: true, message: '請輸入活動名稱', trigger: 'blur' }, { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' } ], region: [//校驗select選擇器 { required: true,type:'number', message: '請選擇活動區域', trigger: 'change' } ], ... } ...
看文檔,一定要認真點,仔細點!
后言:
沒入手vue.js+elementui之前,總覺得這個有點難,只是因為自己不太熟悉;而當自己憑借喜歡以及工作需要慢慢了解它后,才發現原來並不難,而只是自己給它附上了一層“神秘”的面紗而已。其實在這個項目中遇見的問題還很多,后續繼續總結。