nervtn-web/src/components/contact/Profile.vue

<script setup>
import {useI18n} from 'vue-i18n';

const {t} = useI18n({useScope: 'local'});
</script>

<template>
<form id="profil" method="POST" v-on:submit="checkForm">

    <div title="👤">
		<h1>👤 {{ t ('pwa.profile') }}</h1>
      	<div>
			<label for="avatar">{{ t ('pwa.avatar') }}</label>
			<input type="file" id="avatar" />
		</div>
		
		<div>
			<label for="nickname">{{ t ('pwa.nickname') }}:</label>
			<input type="text" id="nickname" v-model="home">
		</div>

		<div>
			<label for="emailHome">{{ t ('pwa.emailHome') }}:</label>
			<input type="email" id="emailHome" v-model="home" placeholder="john.Doe@email.com" required>
		</div>
    </div>

	<br>

    <div title="📇">
		<h1>📇 {{ t ('pwa.personalInfo') }}</h1>
      	<div>
			<label for="name">{{ t ('pwa.name') }}:</label>
			<input type="text" id="name" v-model="home" pattern="{a-zA-Z}{4,25}" placeholder="John Doe" required>
		</div>

		<div>
			<label for="bday">{{ t ('pwa.bday') }}:</label>
			<input type="date" id="bday" v-model="home">
		</div>
		
        <div>
			<label for="nbrHome">{{ t ('pwa.nbrHome') }}:</label>
			<input type="tel" id="nbrHome" v-model="home" placeholder="+32(0)15738490" >
		</div>

		<div class="Home">
			<h3>{{ t ('pwa.home') }}</h3>
				<ul>
					<li><label for="street">{{ t ('pwa.street') }}:</label></li>
					<input type="text" id="street"	v-model="home">
					
					<li><label for="locality">{{ t ('pwa.locality') }}:</label></li>
					<input type="text" id="locality" v-model="home">
					
					<li><label for="pcode">{{ t ('pwa.pcode') }}:</label></li>
					<input type="text" id="pcode" v-model="home">
					
					<li><label for="ctry">{{ t ('pwa.ctry') }}:</label></li>
					<input type="text" id="ctry" v-model="home">
				</ul>	
		</div>
    </div>

	<br>

    <div title="💼">
		<h1>💼 {{ t ('pwa.job') }}</h1>
      <div>
			<label for="orgname">{{ t ('pwa.orgname') }}:</label>
			<input type="text" id="orgname" v-model="work">
		</div>
		<div>
			<label for="title">{{ t ('pwa.title') }}:</label>
			<input type="text" id="title" v-model="work">
		</div>
        <div>
			<label for="role">{{ t ('pwa.role') }}:</label>
			<input type="text" id="role" v-model="work">
		</div>
		<div>
			<label for="emailWork">{{ t ('pwa.emailWork') }}:</label>
			<input type="email" id="emailWork" v-model="work">
		</div>
        <div>
			<label for="nbrWork">{{ t ('pwa.nbrWork') }}:</label>
			<input type="tel" id="nbrWork" v-model="work">
		</div>

        <div class="Work">
			<h3>{{ t ('pwa.work') }}</h3>
				<ul>
					<li><label for="street">{{ t ('pwa.street') }}:</label></li>
					<input type="text" id="street" v-model="work">
					
					<li><label for="locality">{{ t ('pwa.locality') }}:</label></li>
					<input type="text" id="locality" v-model="work">
					
					<li><label for="pcode">{{ t ('pwa.pcode') }}:</label></li>
					<input type="text" id="pcode" v-model="work">
					
					<li><label for="ctry">{{ t ('pwa.ctry') }}:</label></li>
					<input type="text" id="ctry" v-model="work">
				</ul>
		</div>
				
		 <button type="submit" value="Submit">{{ t ('pwa.save') }}</button>
    </div>

	<br>

	 <div title="✍🏼">
		 <h1>✍🏼 {{ t ('pwa.comments') }}</h1>
		 <div>
			<label for="comments"></label>
			<textarea id="comments" v-model="home"></textarea>
		</div>
		  <button @click="persist">{{ t ('pwa.save') }}</button>
    </div>

</form>

    </template>

    <script>
	/*const profil = new Vue ({	// vue n'est pas définie
  		el: '#profil',
  		data: {
    	home: null,
		work: null
    
  		},
  		methods:{
    		checkForm: function (e) {
      		if (this.home && this.work) {
        	return true;
      	}
      	e.preventDefault();
    	}
  		}
		}); */


		/*export default {  //home n'est pas déclarer
            name: 'profil',
			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>

	<style scoped>
		label{
			padding: 5px;
		}
		input{
			padding: 5px;
		}
		li {
			list-style-type: none;
		}
		textarea {
			padding: 20px;
		}
		button{
			margin-top: 20px;
		}
	</style>

<i18n lang="json" locale="en" src="./locale/en.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/>