<template>
     <form id="vCard">
       <!-- Informations Personnelles -->
		<p>
			<label for="avatar">Avatar</label>
			<input type="file" />
		</p>
		<p>
			<label for="name">Nom complet</label>
			<input type="text" v-model="home" required>
		</p>
		<p>
			<label for="nickname">Pseudonyme</label>
			<input type="text" v-model="home">
		</p>
		<p>
			<label for="bday">Date de naissance</label>
			<input type="text" v-model="home">
		</p>
		<p>
			<label for="emailHome">Email Perso</label>
			<input type="text" v-model="home">
		</p>
        <p>
			<label for="nbrHome">Numéro de téléphone</label>
			<input type="text" v-model="home">
		</p>

		<p class="Home">
			<h3>Adresse</h3>
				<label for="street">Rue</label>
				<input type="text" v-model="home">
				
				<label for="locality">Ville</label>
				<input type="text" v-model="home">
				
				<label for="pcode">Code Postal</label>
				<input type="text" v-model="home">
				
				<label for="ctry">Pays</label>
				<input type="text" v-model="home">
		</p>
		

        <!-- Emploi -->
		<p>
			<label for="orgname">Entreprise</label>
			<input type="text" v-model="work">
		</p>
		<p>
			<label for="title">Poste</label>
			<input type="text" v-model="work">
		</p>
        <p>
			<label for="role">Rôle</label>
			<input type="text" v-model="work">
		</p>
		<p>
			<label for="emailWork">Email Professionnel</label>
			<input type="text" v-model="work">
		</p>
        <p>
			<label for="nbrWork">Numéro de téléphone</label>
			<input type="text" v-model="work">
		</p>

        <p class="Work">
			<h3>Adresse</h3>
				<label for="street">Rue</label>
				<input type="text" v-model="work">
				
				<label for="locality">Ville</label>
				<input type="text" v-model="work">
				
				<label for="pcode">Code Postal</label>
				<input type="number" v-model="work">
				
				<label for="ctry">Pays</label>
				<input type="text" v-model="work">
		</p>
		
		<p>				
		 <button @click="persist">Enregistrer</button>
		</p> 
     </form>
    </template>

    <script>
		export default {
            name: 'vCard',
			setup() {
            home = "",
            work = ""
			},
			mounted() {
			if (localStorage.home) {
			this.home = localStorage.home;
				}
			if (localStorage.work) {
			this.work = localStorage.work;
				}	
			},
			 methods: {
				persist() {
				localStorage.home = this.home;
				localStorage.work = this.work;
				console.log('ok');
					}
				}

			};
      
    </script>