Vue 大量data及rules的data選項結構組織

如果Vue文件需要很多的data成員及表單驗證，建議使用類似結構

export default{
  data(){
     const model = {
      username: 'suzhen',
      password: '12345678'
    }
     const rules = {
        username: [
        { required: true, message: 'Username is required' },
        { min: 2, max: 16, message: 'Username must be between 2 and 16 characters'       
        }],
      password: [
        { required: true, message: 'Password is required' },
        { min: 4, max: 16, message: 'Password must be between 4 and 16 characters' }
        ]}
    // 加上頁面數據 
    return { model, rules, error: null, loading: false }
}