Combine 3 data object into a single data object within Vue template

Question

OK, so this is the high level. I have 3 objects under a data() field

data () {
   birth_day: '',
   birth_month: '',
   birth_year: '',
   birthdate: '',
}

I also have a 4th data object called birthdate as you can see above. When a user fills in each item, I want to combine them into birthdate in the format YEAR-MONTH-DAY (for Database storage)

I also, if possible, want to add a 0 if someone types say 3 for March and not 03

I am having an issue wrapping my head around this. This is part of a multi-step registration form.

Any help would be very helpful!

PS for anyone asking - this is the template code:

<div class="flex flex-row justify-between">
                    
   <div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-red-600 focus-within:border-red-600">
       <label for="birth_month" value="birth_month" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Month</label>
       <input minlength="2" maxlength="2" type="text" name="birth_month" id="birth_month" class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" placeholder="02" />
   </div>

   <div class="relative border border-gray-500 rounded-md px-3 py-2 mx-4 shadow-sm focus-within:ring-1 focus-within:ring-red-600 focus-within:border-red-600">
       <label for="birth_day" value="birth_day" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Day</label>
       <input minlength="2" maxlength="2" type="text" name="birth_day" id="birth_day" class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" placeholder="15" />
   </div>

   <div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-red-600 focus-within:border-red-600">
      <label for="birth_year" value="birth_year" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Year</label>
      <input minlength="4" maxlength="4" type="text" name="birth_year" id="birth_year" class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm" placeholder="2000" />
   </div> 

</div>

For birthdate, you should probably use something like date-fns to properly handle this. Otherwise, a computed property should be enough to mix all those 3 together. — kissu
– kissu, Commented Mar 15, 2022 at 21:53
If I was doing date manipulation I would agree, but all I need to do is combine them into the right order and store it accordingly, Yes, there will be some error control (such as nobody under 18) but this isn't the issue here. I just cannot remember the best way to combine this all into a single data object — ArcticMediaRyan
– ArcticMediaRyan, Commented Mar 15, 2022 at 21:56
How should the code respond if the day, month, year entered is 29, 02, 1999? Should it store birthdate as '1999-02-29`? NOTE: 1999 is not a leap year and hence February does not have 29 days. — jsN00b
– jsN00b, Commented Mar 16, 2022 at 8:11
@jsN00b see thats a very valid statement. That is something I am struggling with. I wanted initially to use a date picker but I was just not happy with what I was finding at the time. — ArcticMediaRyan
– ArcticMediaRyan, Commented Mar 16, 2022 at 16:09

Nikola Pavicevic · Accepted Answer · 2022-03-16 08:08:45Z

1

If I understood you correctly try like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      birth_day: '',
      birth_month: '',
      birth_year: '',
      birthdate: '',
    }
  },
  methods: {
    formatNr(nr) {
      if(this[nr].length < 2) this[nr] = `0${this[nr]}`
    },
    formatDate() {
      return `${this.birth_year}-${this.birth_month}-${this.birth_day}`
    },
    save() {
      this.birthdate = this.formatDate()
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div>          
    <div>
      <label for="birth_month" value="birth_month">Month</label>
      <input v-model="birth_month" @blur="formatNr('birth_month'), save()" minlength="2" maxlength="2" type="text" name="birth_month" id="birth_month" placeholder="02" />
    </div>
    <div>
      <label for="birth_day" value="birth_day">Day</label>
      <input v-model="birth_day" @blur="formatNr('birth_day'), save()" minlength="2" maxlength="2" type="text" name="birth_day" id="birth_day" placeholder="15" />
    </div>
    <div>
      <label for="birth_year" value="birth_year">Year</label>
      <input v-model="birth_year" @blur="save()" minlength="4" maxlength="4" type="text" name="birth_year" id="birth_year" placeholder="2000" />
    </div> 
  </div>
  <h4>birthdate: {{ birthdate }}</h4>
</div>

edited Mar 16, 2022 at 8:08

answered Mar 15, 2022 at 23:25

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ArcticMediaRyan Over a year ago

2 things 1. This is CLOSE to what I need. There is an issue (I thought of after) if someone types a 2 digit year (Which I can solve instantly now) and 2. I didn't want it as part of a button. I wanted it calculated when the user clicks next on the form. That being said, Seeing your code does give me enough of what I need to continue resolving this. If you happen to have a solution to the above 2 issues, by all means let me know!!!

Nikola Pavicevic Over a year ago

@ArcticMediaRyan hey mate, you have computed property to show you your date while typing, and what is next on the form? button or some other input field? you can call formatDate method when ever you want :)

Collectives™ on Stack Overflow

Combine 3 data object into a single data object within Vue template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related