|
9 | 9 | <b-form-input type="text" id="name" name="name" :class="{ 'is-invalid': form.errors.has('name') }" v-model="form.name"></b-form-input> |
10 | 10 | <has-error :form="form" field="name" /> |
11 | 11 | </b-form-group> |
| 12 | + <b-form-group |
| 13 | + label="Hobbies:" |
| 14 | + label-for="hobbies"> |
| 15 | + <b-form-select id="hobbies" name="hobbies" :class="{ 'is-invalid': form.errors.has('hobbies') }" v-model="form.hobbies" :options="options"></b-form-select> |
| 16 | + <has-error :form="form" field="hobbies" /> |
| 17 | + </b-form-group> |
12 | 18 | <b-form-group |
13 | 19 | label="Email:" |
14 | 20 | label-for="email" > |
15 | 21 | <b-form-input type="email" id="email" name="email" :class="{ 'is-invalid': form.errors.has('email') }" v-model="form.email"></b-form-input> |
16 | 22 | <has-error :form="form" field="email" /> |
17 | 23 | </b-form-group> |
| 24 | + <b-form-group |
| 25 | + label="Phone:" |
| 26 | + label-for="phone"> |
| 27 | + <b-form-input :number="true" :formatter="formatPhone" type="text" id="phone" name="phone" :class="{ 'is-invalid': form.errors.has('phone') }" v-model="form.phone"></b-form-input> |
| 28 | + <has-error :form="form" field="phone" /> |
| 29 | + </b-form-group> |
| 30 | + <b-form-group |
| 31 | + label="Country:" |
| 32 | + label-for="countries"> |
| 33 | + <b-form-select id="countries" name="country_id" value-field="id" text-field="name" :class="{ 'is-invalid': form.errors.has('country_id') }" v-model="form.country_id" :options="countries"></b-form-select> |
| 34 | + <has-error :form="form" field="country_id" /> |
| 35 | + </b-form-group> |
18 | 36 | <b-form-group |
19 | 37 | label="Password:" |
20 | 38 | label-for="password" > |
|
38 | 56 | import Form from 'vform' |
39 | 57 | |
40 | 58 | export default { |
41 | | - components: { |
42 | | - }, |
| 59 | + components: {}, |
43 | 60 | |
44 | | - middleware: 'guest', |
| 61 | + middleware: 'guest', |
45 | 62 | |
46 | | - data: () => ({ |
47 | | - form: new Form({ |
48 | | - name: '', |
49 | | - email: '', |
50 | | - password: '', |
51 | | - password_confirmation: '' |
52 | | - }) |
53 | | - }), |
| 63 | + data: () => ({ |
| 64 | + form: new Form({ |
| 65 | + name: '', |
| 66 | + hobbies: '', |
| 67 | + email: '', |
| 68 | + phone: '', |
| 69 | + country_id: 1, |
| 70 | + password: '', |
| 71 | + password_confirmation: '' |
| 72 | + }), |
| 73 | + options: [ |
| 74 | + { value: 'Soccer', text: 'Soccer'}, |
| 75 | + { value: 'Game', text: 'Game'}, |
| 76 | + { value: 'Watching', text: 'Watching'} |
| 77 | + ], |
| 78 | + countries: [] |
| 79 | + }), |
54 | 80 | |
55 | | - methods: { |
56 | | - async register () { |
57 | | - const { data } = await this.form.post('/api/register') |
| 81 | + methods: { |
| 82 | + async register () { |
| 83 | + const { data } = await this.form.post('/api/register') |
58 | 84 | |
59 | | - const { data: { token } } = await this.form.post('/api/login') |
| 85 | + const { data: { token } } = await this.form.post('/api/login') |
60 | 86 | |
61 | | - this.$store.dispatch('auth/saveToken', { token }) |
| 87 | + this.$store.dispatch('auth/saveToken', { token }) |
62 | 88 | |
63 | | - await this.$store.dispatch('auth/updateUser', { user: data }) |
| 89 | + await this.$store.dispatch('auth/updateUser', { user: data }) |
64 | 90 | |
65 | | - this.$router.push({ name: 'home' }) |
| 91 | + this.$router.push({ name: 'home' }) |
| 92 | + }, |
| 93 | + async loadCountries () { |
| 94 | + const { data } = await this.form.get('/api/countries') |
| 95 | + this.countries = data; |
| 96 | + }, |
| 97 | + formatPhone(e){ |
| 98 | + return String(e).substring(0,10); |
| 99 | + } |
| 100 | + }, |
| 101 | + mounted() { |
| 102 | + this.loadCountries() |
66 | 103 | } |
67 | | - } |
68 | 104 | } |
69 | 105 | </script> |
0 commit comments