TiendaFront/src/components/dataSection.vue

<template>
  <form class="mt-4" role="form" data-toggle="validator" @submit.prevent="checkForm">
  
  <div class="my-3">
  <div class="row ">
  <div class="form-check col-4 ">
  <input class="form-check-input" type="radio"  id="exampleRadios1"  v-model="select" value="invitado" checked>
  <label class="form-check-label" for="exampleRadios1">
    Invitado
  </label>
</div>
<div class="form-check col-4">
  <input class="form-check-input" type="radio"  id="exampleRadios2" v-model="select" value="cuenta">
  <label class="form-check-label" for="exampleRadios2">
    Ya Tengo Cuenta
  </label>
</div>
<div class="form-check col-4">
  <input class="form-check-input" type="radio"  id="exampleRadios3" v-model="select" value="newCuenta">
  <label class="form-check-label" for="exampleRadios2">
    Crear Cuenta
  </label>
</div>
</div>
 
  </div>
   
<div v-if="submitted === true">
	<div v-if="hasErrors" class="error">
		<strong>Se han producido los siguientes errores:</strong>
		<ul>
			<li v-bind:key="error" v-for="error in errors">{{ error }}</li>
		</ul>
	</div>
	<div v-else class="correcto">
		<strong>Enviado!</strong>
	</div>
</div>

    <div v-if="select == 'invitado' ">
  <div class="form-group">
    <label for="InputNombre1">Nombres</label>
    <input type="text" class="form-control" id="InputNombre1"  placeholder="Ingresa tu nombre" v-model="invitado.nombre">
  </div>

  <div class="form-group">
    <label for="InputApellido1">Apellidos</label>
    <input type="text" class="form-control" id="InputApellido1"  placeholder="Ingresa tus apellidos" v-model="invitado.apellido">
  </div>

  <div class="form-group">
    <label for="InputCorreo1">Correo</label>
    <input type="email" class="form-control" id="InputCorreo1"  placeholder="Enter email" v-model="invitado.correo">
  </div>
  </div>
  


    <div v-if="select == 'cuenta' ">
  <div class="form-group">
    <label for="InputCorreo2"  >Correo</label>
    <input type="email" class="form-control" id="InputCorreo2"  placeholder="Enter email" v-model="cuenta.correo">
  </div>

   <div class="form-group">
    <label for="InputPassword2">Contraseña</label>
    <input type="password" class="form-control" id="InputPassword1" placeholder="Password" v-model="cuenta.contrasena">
  </div>
  </div>
  


    <div v-if="select == 'newCuenta' ">
  <div class="form-group">
    <label for="InputNombre3">Nombres</label>
    <input type="email" class="form-control" id="InputNombre3" v-model="newCuenta.nombre" placeholder="Ingresa tu nombre">
  </div>

  <div class="form-group">
    <label for="InputApellido3">Apellidos</label>
    <input type="email" class="form-control" id="InputApellido3" v-model="newCuenta.apellido" placeholder="Ingresa tus apellidos">
  </div>

  <div class="form-group">
    <label for="InputCorreo3">Correo</label>
    <input type="email" class="form-control" id="InputCorreo3" v-model="newCuenta.correo" placeholder="Ingresa tu correo">
  </div>

<div class="form-group">
  <label for="exampleInputEmail1">Fecha de Nacimiento</label>
    <input class="form-control" type="date" value="2011-08-19" id="dataEjemploFecha"  v-model="newCuenta.nacimiento">
  
</div>

<div class="form-group">
    <label for="exampleInputEmail1">Contraseña</label>
    <input type="email" class="form-control" id="exampleInputEmail1" v-model="newCuenta.contrasena" placeholder="Enter email">
  </div>

  </div>
  
<div v-if="select != ''">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="check.ofertas" >
    <label class="form-check-label" for="exampleCheck1">Recibir ofertas de nuestros socios</label>
  </div>
    <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck2" v-model="check.suscribirse" >
    <label class="form-check-label" for="exampleCheck2">Suscribirse a nuestro boletín de noticias</label>
  </div>
</div>

<!-- <pre>{{$data}}</pre> -->

    <div v-if="(invitado.nombre && invitado.apellido && invitado.correo) 
    || (cuenta.correo && cuenta.contrasena) 
    || (newCuenta.nombre && newCuenta.apellido && newCuenta.correo && newCuenta.nacimiento && newCuenta.contrasena) != ''">
  <button type="submit" @click="NextStep()" class="btn btn-success">continuar</button>
</div>
</form>
</template>

<script>
export default {
data(){
    return{
        continuar:false,
        select:'',
        errors:[], submitted:false,
        invitado:{
          nombre:'',
          apellido:'',
          correo:''
        },
        cuenta:{
          correo:'',
          contrasena:''
        },
        newCuenta:{
          nombre:'',
          apellido:'',
          correo:'',
          nacimiento:'',
          contrasena:''
        },
        check:{
          ofertas:false,
          suscribirse:false
        }
    }
},
methods:{
     checkForm() {
            this.submitted = true;
            switch(this.select){
              case 'invitado':
                console.log(this.select)
                break

                case 'cuenta':
                console.log(this.select)
                break

                case 'newCuenta':
                console.log(this.select)
                break
            }
            this.continuar = true
        },
        NextStep(){
         let pagina = this.$router.currentRoute.name
         switch(pagina){
           case 'personalData':
             this.$router.push({name:'home'})

             break;
         }

        }
},
computed:{
  hasError(){
        return this.errors.length;
}
},
created(){
  console.log(this.$router.currentRoute)
}
}
</script>