回顧一下,昨天有分析登入頁會有4個子頁:
後面幾天會分別來把四個子頁的畫面做出來~那我們就開始吧!!
參考Google的輸入帳號,要做的和它相去不遠!!
接著就開啟 /components/KeyinUser.vue 開始摟~
輸入帳號頁面屬於表單,所以我們會用到Vuetify-Forms表單組件來處理
首先在 template 裡面包上最外層的 v-from:
<template>
<v-form ref="form">
</v-form>
</template>
this.$refs.ref值
的方式來對應表單內加上輸入帳號的文字輸入框:
<v-form ref="form">
<v-card-text>
<v-text-field
label="輸入您的帳號"
type="text"
class="font-weight-bold"
outlined
clearable
></v-text-field>
</v-card-text>
</v-form>
效果如下:
想像一下,若帳號密碼等資訊放在不同頁的話,資料傳遞溝通會很困難
於是這裡設計將表單資訊都存放在父層 Login.vue
的data中,溝通時使用 props 方式傳入,子層則使用 $emit
來回寫資料
這樣寫既可以保持數據的流向,出錯時也較好查詢原因,日後維護會方便許多
接著開啟 /views/Login.vue 在data裡面加上需要的表單資料吧!!
data() {
return {
...,
user: {
username: "",
accountId: "",
password: "",
},
};
},
註: 姓名的部分會在驗證帳號後由伺服器回傳,這邊先寫起來放
再來會用到一個神奇的後綴語法 - .sync
.sync
: 資料傳遞的語法糖$emit
通知父層做資料改變,但它的好處是直接幫助我們省去了在父層多寫1個事件及 v-on:update
監聽接著在將帳號傳入時加上它:
<router-view :account-id.sync="user.accountId"></router-view>
回到 /components/KeyinUser.vue 用 props 接收
export default {
name: "KeyinUser",
props: ["accountId"],
};
寫一個 computed 來計算要對應的帳號綁定資料
其中內容有 get()
方法與 set()
方法
get()
: 得到props傳入的帳號set(value)
: 使用 $emit
方法將值送回父層更新computed: {
myAccountId: {
get() {
return this.accountId;
},
set(value) {
this.$emit("update:accountId", value);
},
},
},
最後用 v-model
指令綁定文字框組件:
<v-card-text>
<v-text-field
v-model="myAccountId"
></v-text-field>
</v-card-text>
這樣就完成了帳號的雙向綁定溝通囉~
再來要做個簡單的驗證,加上這兩個驗證規則,參考Vuetify-Forms 創建規則:
在文字框加上 v-bind:對應規則
:
<v-text-field
...
:rules="usernameRules"
></v-text-field>
對應規則用陣列的方式寫在data裡面,規則的寫法為: 判斷||判斷不成立要呈現的訊息
第一個規則的情境就是「必須輸入帳號否則顯示"請輸入帳號"」
data() {
return {
usernameRules: [
(v) => !!v || "請輸入帳號",
],
};
},
第二個規則的情境就是「必須有輸入且輸入值長度小於規定否則顯示"最多10碼"」:
data() {
return {
usernameLength: 10,
usernameRules: [
(v) => !!v || "請輸入帳號",
(v) => (v && v.length <= this.usernameLength) || "最多10碼",
],
};
}
順便加上 counter 屬性讓文字框呈現長度規則,使用者體驗會好一點點:
<v-text-field
...
:counter="usernameLength"
></v-text-field>
效果如下:
最後加上 [繼續] 按鈕就可以結束這回合!!
<v-form ...>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" class="mr-2">繼續</v-btn>
</v-card-actions>
</v-form>
來看看最後完成的效果吧~
今日重點:
Login.vue
,並使用 .sync
及 $emit
做父子層雙向溝通v-bind:rules="驗證規則"
,驗證規則放在data中類型為 陣列
判斷
||若判斷不成立要呈現的訊息
有些觀念可能很難懂,如果我有講不清楚或不完整請提出來~
有需要改進或是任何意見建議歡迎下面留言~