Assignment 9

App.vue

<template>
    <div class="container">
        <form>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <form>
                        <div class="form-group">
                            <label>Name</label>
                            <full-name v-model="name"></full-name>
                        </div>
                        <div class="form-group">
                            <label>Email address</label>
                            <input type="email" class="form-control" placeholder="Email" v-model="email">
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control" placeholder="Password" v-model="password">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" v-model="storeFlag"> Store data?
                            </label>
                        </div>
                        <button type="submit" class="btn btn-default" @click.prevent="submitForm">Submit</button>
                    </form>
                </div>
            </div>
        </form>
        <hr>
        <div class="row" v-if="submitted">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Your Data</h4>
                    </div>
                    <div class="panel-body">
                        <p>Full Name: {{ name }}</p>
                        <p>Mail: {{ email }}</p>
                        <p>Password: {{ password }}</p>
                        <p>Store in Database?: {{ storeFlag }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import FullName from './components/FullName.vue';

export default {
    data() {
        return  {
            name: null,
            email: null,
            password: null,
            storeFlag: false,
            submitted: false,
        };
    },
    methods: {
        submitForm() {
            this.submitted = true;
        },
    },
    components: {
        FullName
    },
}
</script>

FullName.vue

<template>
    <div class="row">
        <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="First name" :value="firstName" @input="updateFirstName($event)">
        </div>
        <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="Last name" :value="lastName" @input="updateLastName($event)">
        </div>
    </div>
</template>

<script>
export default {
    props: ['value'],
    methods: {
        updateFirstName(event) {
            const newVal = event.target.value;
            this.$emit('input', `${newVal} ${this.lastName}`);
        },
        updateLastName(event) {
            const newVal = event.target.value;
            this.$emit('input', `${this.firstName} ${newVal}`);
        },
    },
    computed: {
        firstName() {
            if (this.value) {
                return this.value.split(' ', 2)[0];
            }
            return '';
        },
        lastName() {
            if (this.value) {
                return this.value.split(' ', 2)[1];
            }
            return '';
        },
    }
}
</script>