<template>
    <div>
        <h1>FORM</h1>
        <form>
            <input type="text" name="" id="sname" placeholder="Name of School" v-model="namesc"><br>
            <input type="text" name="" id="saddress" placeholder="Address" v-model="addrsc"><br>
            <select name="" id="" v-model="modstate">
                <option value="" v-for="state in states">{{state}}</option>
            </select><br>
            <textarea name="" id="sdesc" cols="30" rows="10" v-model="dessc"></textarea><br>
            <button @click.prevent="addinfo">add</button>
        </form>
        <div>
            <p v-for="schname in schnames">Name: {{schname}}</p>
            <p v-for="address in addresses">Address: {{address}}</p>
            <p>State: {{modstate}}</p>
            <p v-for="description in descriptions">Description: {{description}}</p>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
        states : ['Abia','Adamawa','Akwa-Ibom','Anambra','Bayelsa'],
        namesc:'',
        addrsc:'',
        dessc:'',
        modstate:'',
        schnames: [],
        addresses :[],
        // modelStates :[],
        descriptions :[]
        }
    },
    methods: {
    addinfo:function(){
        if (this.namesc !== ''){
            this.schnames.push(this.namesc);
            this.addresses.push(this.addrsc);
            this.descriptions.push(this.dessc);
            // this.modelStates.push(this.modstate);
            this.namesc = '';
            this.addrsc = '';
            this.dessc = '';
            this.modstate = '';
        }
   }
}
}
</script>
<style scoped>

</style>



Thanks a lot.Got it, thanks!Thanks