profile.blade.php

@extends('base')

@section('vue-content')
    @php
    @endphp
    <profile user="{{ $user }}" url="{{ route('api:auth:login') }}"></profile>
@endsection

@section('title', 'Profile')

Profile.vue

<template>
    <div>
        <div class="page">
            <div class="page-main">
                <div class="my-3 my-md-5">
                    <div class="container">
                        <div class="page-header">
                            <h1 class="page-title">
                                Kemaskini Maklumat Parent
                            </h1>
                        </div>
                        <div class="row row-cards row-deck">
                            <div class="col-lg-12">
                                <form class="card" @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
                                    <div class="card-body">
                                        <div class="alert alert-primary">Sila kemaskini maklumat anda. Maklumat ini akan memudahkan urusan Grading anak anda kelak. </div>
                                        <h3 class="card-title">Kemaskini Profil</h3>
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label class="form-label">Nama Ibu/Bapa/Penjaga</label>
                                                    <input :class="{ 'is-invalid': form.errors.has('name') }" v-model="form.name" name="name" type="text" class="form-control" placeholder="Nama Ibu/Bapa/Penjaga" value="">
                                                    <div class="invalid-feedback" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">Alamat email</label>
                                                    <input :class="{ 'is-invalid': form.errors.has('email') }" name="email" v-model="form.email" type="email" disabled="" class="form-control">
                                                    <div class="invalid-feedback" v-if="form.errors.has('email')" v-text="form.errors.get('email')"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="form-label">Alamat Rumah</label>
                                                    <input :class="{ 'is-invalid': form.errors.has('home_address') }" v-model="form.home_address" name="home_address" type="text" class="form-control" placeholder="1, Jalan 2, Taman Budiman" value="">
                                                    <div class="invalid-feedback" v-if="form.errors.has('home_address')" v-text="form.errors.get('home_address')"></div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">Bandar</label>
                                                    <input :class="{ 'is-invalid': form.errors.has('city') }" v-model="form.city" name="city" type="text" class="form-control" placeholder="Shah Alam" value="">
                                                    <div class="invalid-feedback" v-if="form.errors.has('city')" v-text="form.errors.get('city')"></div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Poskod</label>
                                                    <input :class="{ 'is-invalid': form.errors.has('postal_code') }" v-model="form.postal_code" name="postal_code" type="text" class="form-control" placeholder="40170">
                                                    <div class="invalid-feedback" v-if="form.errors.has('postal_code')" v-text="form.errors.get('postal_code')"></div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-md-3">
                                                <div class="form-group">
                                                    <label class="form-label">Negeri</label>
                                                    <input :class="{ 'is-invalid': form.errors.has('state') }" v-model="form.state" name="state" type="text" class="form-control" placeholder="Selangor">
                                                    <div class="invalid-feedback" v-if="form.errors.has('state')" v-text="form.errors.get('state')"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label class="form-label">Negara</label>
                                                    <select :class="{ 'is-invalid': form.errors.has('country') }" v-model="form.country" name="country" class="form-control custom-select">
                                                        <option value="Malaysia">Malaysia</option>
                                                    </select>
                                                    <div class="invalid-feedback" v-if="form.errors.has('country')" v-text="form.errors.get('country')"></div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4 col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">No. Kad Pengenalan Penjaga</label>
                                                    <input :class="{ 'is-invalid': form.errors.has('guardian_identity_card') }" v-model="form.guardian_identity_card" name="guardian_identity_card" type="text" class="form-control" placeholder="02070524140439" value="">
                                                    <div class="invalid-feedback" v-if="form.errors.has('guardian_identity_card')" v-text="form.errors.get('guardian_identity_card')"></div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-4 col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">No Telefon Bimbit Suami</label>
                                                    <input :class="{ 'is-invalid': form.errors.has('husband_mobile_number') }" v-model="form.husband_mobile_number" name="husband_mobile_number" type="text" class="form-control" placeholder="010-12345678" value="">
                                                    <div class="invalid-feedback" v-if="form.errors.has('husband_mobile_number')" v-text="form.errors.get('husband_mobile_number')"></div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-4 col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">No Telefon Bimbit Isteri</label>
                                                    <input :class="{ 'is-invalid': form.errors.has('wife_mobile_number') }" v-model="form.wife_mobile_number" name="wife_mobile_number" type="text" class="form-control" placeholder="010-12345678" value="">
                                                    <div class="invalid-feedback" v-if="form.errors.has('wife_mobile_number')" v-text="form.errors.get('wife_mobile_number')"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer text-right">
                                        <button type="submit" class="btn btn-secondary">Saya akan kemaskini kemudian</button>
                                        <button type="submit" class="btn btn-success" :disabled="form.errors.any()">Kemaskini Profil</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Form from '~/Form'

    export default {
        props: {
            user: { required: true },
            url: { required: true }
        },
        data() {
            return {
                form: new Form({
                    name: this.user.name,
                    email: this.user.email,
                    home_address: this.user.home_address,
                    city: this.user.city,
                    postal_code: this.user.postal_code,
                    state: this.user.state,
                    country: this.user.country,
                    guardian_identity_card: this.user.guardian_identity_card,
                    husband_mobile_number: this.user.husband_mobile_number,
                    wife_mobile_number: this.user.wife_mobile_number
                })
            }
        },
        methods: {
            onSubmit() {
                this.form.post(url)
                    .then(res => {

                    })
            }
        }
    }
</script>