从vue组件获取价值并提交时出现问题

我正在使用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>

使用Vue Devtools时,以下是元素中的数据:

从vue组件获取价值并提交时出现问题

谢谢。

xiaozhidetiankong 回答:从vue组件获取价值并提交时出现问题

像德约基奇(N. Djokic)所说的问题,主要是由于我的日历中的验证。

在帖子axios.post('/user/setdate',this.selectedMonth)中未设置请求名称时,我正在验证错误的名称字段

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

我已在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);
}
本文链接:https://www.f2er.com/3169422.html

大家都在问