Vue.jsを使った生年月日データの整形

1.生年月日のフォームが「年」「月」「日」で分かれている場合に、送信するリクエストではyyyy-mm-ddにする

概要：送信用のhiddenのinputを用意し、submitボタンにイベントを設け、yyyy-mm-ddの形に繋げたものを用意したhiddenのinputに格納する。

blade（該当箇所抜粋）

<div id="app">
  <form>
    <input type="hidden" name="birthday_date" v-model="birthday.date" />
    <input type="text" v-model="birthday.year" />
    <select v-model="birthday.month">
      @for($month = 1; $month <= 12; $month++)
        <option value="{{ $month }}">{{ $month }}</option>
      @endfor
    </select>
    <select v-model="birthday_day">
      @for($day = 1; $day <= 31; $day++)
        <option value="{{ $day }}">{{ $day }}</option>
      @endfor
    </select>
    <button type="submit" @click="formatBithday">更新</button>
  </form>
</div>

Vue.js（該当箇所抜粋）

new Vue({
  el: '#app',
  data: {
    birthday: {
      date: '',
      year: '',
      month: '',
      day: ''
    }
  }
  methods: {
    formatBithday: function () {
      if (this.birthday.year || this.birthday.month || this.birthday.date) {
        this.birthday.date = `${this.birthday.year}-${this.birthday.month}-${this.birthday.day}`;
      }
    }
  }
});

2.yyyy-mm-ddで送られてきた際にこれを分割して自動的に入力させる方法

概要：createを使ってフォーム画面にアクセスしたタイミングで自動入力

blade（該当箇所抜粋）

<div id="app">
  <form>
    <input type="hidden" name="birthday_date" id="birthday_date" v-model="birthday.date" />
    <input type="text" v-model="birthday.year" />
    <select v-model="birthday.month">
      @for($month = 1; $month <= 12; $month++)
        <option value="{{ $month }}">{{ $month }}</option>
      @endfor
    </select>
    <select v-model="birthday_day">
      @for($day = 1; $day <= 31; $day++)
        <option value="{{ $day }}">{{ $day }}</option>
      @endfor
    </select>
  </form>
</div>

Vue.js（該当箇所抜粋）

new Vue({
  el: '#app',
  data: {
    birthday: {
      date: '',
      year: '',
      month: '',
      day: ''
    }
  },
  created: function () {
    const birthdayDate = $("#birthday_date").val().split('-');
    // 本当はthis.birthday.dateで取り出したいがこのタイミングでは値が入ってないためやむなくjQueryを使用。
    this.birthday.year = birthdayDate[0];
    this.birthday.month = birthdayDate[1];
    this.birthday.day = birthdayDate[2];
  }
});