Проблема получения значения из компонента VUE и отправки

Question

Я использую Laravel. Я пытаюсь отправить значение средства выбора месяца, но не могу найти способ получить значение из календаря. При отправке я получаю /user/setdate 422 (Unprocessable Entity).

Я уже установил маршрут Route::post('/user/setdate', 'UserController@setDate');

Вот мой компонент calendar.vue.

    <script>
      import moment from 'moment';
      moment.locale('pt-pt');
      import VueMonthlyPicker from 'vue-monthly-picker';
      var d = new Date(),
        minDate = new Date(),
        minDate = minDate.setMonth(minDate.getMonth() - 1);
        console.log(minDate);
      export default {
        data: function() {
          return {
            monthLabels: moment.monthsShort(),
            selectedMonth: moment(new Date()),
            placeHolder: "Selecionar",
            min: moment(minDate),
            dateFormat: "MMM/YY",
            clearOption: false,
            fields: {},
            errors: {},
          }
        },
        methods: {
          submit() {
            this.errors = {};
            axios.post('/user/setdate', this.selectedMonth).then(response => {
              alert('Guardado!');
            }).catch(error => {
              if (error.response.status === 422) {
                this.errors = error.response.data.errors || {};
              }
            });
          },
        },
        components: {
          VueMonthlyPicker
        },
        mounted() {
          console.log('Component mounted.')
        }
      }
    </script>
    <template>
        <form class="form-inline" @submit.prevent="submit">
            <div class="input-group mb-2">
                <vue-monthly-picker v-model="selectedMonth" :monthLabels="monthLabels" :min="min" :dateFormat="dateFormat" :placeHolder="placeHolder" :clearOption="clearOption"></vue-monthly-picker>
            </div>
            <button class="btn btn-secondary ml-2 mb-2" type="submit">Guardar</button>
        </form>
    </template>

При использовании VueDevtools, вот данные в элементе:

Заранее спасибо.

Answer 1

Проблема, как сказал Н. Джокич, в основном из-за проверки в моем календаре.

Я проверял поле неправильного имени, когда в сообщении не было задано имя запроса axios.post('/user/setdate', this.selectedMonth)

        $this->validate($request, [
        'selectedMonth' => 'required|string',
    ]);

Я обновил метод submit в vue, указав имя для поля:

  submit() {
    let self = this;
    self.errors = {};
    axios.post('/user/setdate', {date: this.selectedMonth}).then(response => {
      console.log(response.data);
      alert('Guardado!');
    }).catch(error => {
      if (error.response.status === 422) {
        self.errors = error.response.data.errors || {};
      }
    });
  },

, и теперь я могу получить и проверить его в своем контроллере:

public function setDate(Request $request) {
    $this->validate($request, [
        'date' => 'required|string',
    ]);
    /*
      Add mail functionality here.
    */
    return response()->json($request->input('date'), 200);
}