亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Die V-Modell-Bindung in meinem Datumsauswahlfeld funktioniert nicht richtig.

Wenn Sie eine Auswahl treffen, wird diese live auf dem Bildschirm aktualisiert, die Werte werden jedoch nicht im reaktiven Objekt formValues ??gespeichert.

Da vee-validate keine Datumsauswahlfelder unterstützt, wie kann ich die Aktualisierung auf dieselbe Reaktionskomponente (formValues) erzwingen, der alle meine anderen Eingabefelder zugeordnet sind?

<template>
  <img alt="Vue logo" src="./assets/logo.png">

      <div v-if="showUnderAge.isVisible">
    SORRY WE CANT HELP UNDER 18

    </div>

    <div v-if="showOutOfCountry.isVisible">
    SORRY WE CANT HELP OUT OF COUNTRY

    </div>

  <div  v-if="showContainer.isVisible">
    <h1>Create your Account</h1>
 
    Verify Entry values: 
    <br />    
    {{ formValues }}


    <Form
      @submit="nextStep"
      :validation-schema="currentSchema"
      v-slot="{ handleSubmit }"
    >
      <template v-if="currentStep === 0">

        <label for="name">Name</label>
        <Field 
          name="name" 
          id="name" 
          v-model="formValues.name" 
        />
        <ErrorMessage name="name" />
        <br />  

        <label for="email">Email</label>
        <Field
          name="email"
          id="email"
          type="email"
          v-model="formValues.email"
        />
        <ErrorMessage name="email" />
        <br />  



        <label for="country">Country</label>
          <Field as="select" name="country" v-model="formValues.country">
                <option value="United States">United States</option>
                <option value="Canada">Canada</option>
                <option value="-" disabled>---------------</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="?land Islands">?land Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
                <option value="American Samoa">American Samoa</option>
                <option value="Andorra">Andorra</option>
                <option value="Angola">Angola</option>
                <option value="Anguilla">Anguilla</option>
                <option value="Antarctica">Antarctica</option>
                <option value="Antigua and Barbuda">Antigua and Barbuda</option>

          </Field>
        <br />  

        <label for="dob">Date of Birth</label>
        <Datepicker autoApply name="dob" v-model="formValues.date" :enableTimePicker="false" style="width: 20%"></Datepicker>
        <br /> 


      </template>

      <template v-if="currentStep === 1">
        <label for="password">Password</label>
        <Field
          name="password"
          type="password"
          id="password"
          v-model="formValues.password"
        />
        <ErrorMessage name="password" />

        <label for="confirmation">Confirm Password</label>
        <Field
          name="confirmPassword"
          type="password"
          id="confirmation"
          v-model="formValues.password"
        />
        <ErrorMessage name="confirmPassword" />
      </template>

      <template v-if="currentStep === 2">
        <label for="address">Address</label>
        <Field
          as="textarea"
          name="address"
          id="address"
          v-model="formValues.address"
        />
        <ErrorMessage name="address" />

        <label for="postalCode">Postal Code</label>
        <Field
          name="postalCode"
          id="postalCode"
          v-model="formValues.postalCode"
        />
        <ErrorMessage name="postalCode" />
      </template>

      <template v-if="currentStep === 3">
        <label for="terms">Agree to terms and conditions</label>
        <Field
          name="terms"
          type="checkbox"
          id="terms"
          :value="true"
          v-model="formValues.terms"
        />
        <ErrorMessage name="terms" />
      </template>

      <button v-if="currentStep !== 0" type="button" @click="prevStep">
        Previous
      </button>

      <button v-if="currentStep !== 3" type="submit">Next</button>

      <button v-if="currentStep === 3" type="submit">Finish</button>
    </Form>
  </div>

</template>

<script>
import { Form, Field, ErrorMessage } from "vee-validate";
import * as yup from "yup";
import { ref, reactive, computed } from "vue";
import Datepicker from 'vue3-date-time-picker';
import 'vue3-date-time-picker/dist/main.css';
import moment from 'moment';

export default {
  name: "App",
  components: {
    Form,
    Field,
    ErrorMessage,
    Datepicker
  },
  setup: () => {

    const currentStep = ref(0);

    // since vee-validate removes values from the values object once the fields are unmounted
    // we would need to accumlate them manually
    const formValues = reactive({});
    
    const showContainer = ref({isVisible: true});
    const showOutOfCountry = ref({isVisible: false});
    const showUnderAge = ref({isVisible: false});

    const schemas = [
      yup.object({
        name: yup.string().required(),
        email: yup.string().required().email(),
      }),
      yup.object({
        password: yup.string().required().min(6),
        confirmPassword: yup
          .string()
          .required()
          .min(6)
          .oneOf([yup.ref("password")], "Passwords must match"),
      }),
      yup.object({
        address: yup.string().required(),
        postalCode: yup
          .string()
          .required()
          .matches(/^[0-9]+$/, "Must be numeric"),
      }),
      yup.object({
        terms: yup.bool().required().equals([true]),
      }),
    ];

    const currentSchema = computed(() => {
      return schemas[currentStep.value];
    });

        function getAge(dateString){
            var today = new Date();
            var birthDate = new Date(dateString);
            var age = today.getFullYear() - birthDate.getFullYear();
            var m = today.getMonth() - birthDate.getMonth();
            if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) 
            {
                age--;
            }
            return age;
        }

    function nextStep(values) {
          console.log(currentStep.value)
          console.log(values)

         // Age kickout here for entire block
          let dobDt = moment(values.dob).format("YYYY-MM-DD");
          console.log(dobDt)
          let age = getAge(dobDt)
          console.log(age)
          if(age < 18){
            showUnderAge.value.isVisible = true;
            showContainer.value.isVisible = false;

        }else{


                // Country Kick Out
                console.log(values.country)
            if(values.country !== "United States"){
              showOutOfCountry.value.isVisible = true;
              showContainer.value.isVisible = false;
              console.log(showContainer)
              return;

            }else{

              // Last Step
              if (currentStep.value === 3) {
                console.log("Done: ", JSON.stringify(formValues, null, 2));
                return;
              }

              // accumlate the form values with the values from previous steps
              Object.assign(formValues, values);
              console.log("Current values: ");
              console.log(JSON.stringify(formValues, null, 2));
              currentStep.value++;


            }



        }

        
    }

    function prevStep() {
      if (currentStep.value <= 0) {
        return;
      }

      currentStep.value--;
    }

    return {
      currentStep,
      currentSchema,
      prevStep,
      formValues,
      nextStep,
      showContainer,
      showOutOfCountry,
      showUnderAge
    };
  },
};
</script>





<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
 
}
.appContainer{
    max-width: 800px;
  margin: 30px auto;
  overflow: auto;
  min-height: 300px;
    padding: 30px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(109, 109, 109);
}
label{
  font-weight: bold;
}
.validationErrors{
  color: red;
  font-weight: bold;
}
</style>