<div id="app">
    <v-app>
        <v-container grid-list-xl>
            <h1>Create JSON Objects Within an Array</h1>
            <v-layout row>
                <v-flex xs12 sm12 md8 lg4>
                    <v-text-field v-model="prefix" label='Prefix'></v-text-field>
                    <v-text-field v-model="first" label='First Name'></v-text-field>
                    <v-text-field v-model="last" label='Last Name'></v-text-field>
                    <v-text-field v-model="suffix" label='Suffix'></v-text-field>
                </v-flex>
                <v-flex xs12 sm12 md8 lg4>
                    <v-text-field v-model="streetAddress" label='Street Address'></v-text-field>
                    <v-text-field v-model="city" label='City'></v-text-field>
                    <v-text-field v-model="state" label='State'></v-text-field>
                    <v-text-field v-model="zip" label='Zip'></v-text-field>
                </v-flex>
            </v-layout>
            <v-flex xs12 sm12 md8 lg8 class="mt-4">
                <v-layout row justify-space-between>
                    <v-btn color="indigo" dark @click="addAnother">Add Another Object</v-btn>
                    <v-btn color="indigo" dark @click="clearAllFields">Clear All Fields</v-btn>
                    <v-btn color="red" dark @click="deleteArray">Delete Entire Array</v-btn>
                </v-layout>
            </v-flex>
            <v-flex class="mt-4">
                <h2>{{items}}</h2>
            </v-flex>
        </v-container>
    </v-app>
</div>