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>

使用Vue Devtools时，以下是元素中的数据：

谢谢。

Answer 1

像德约基奇（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);
}

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

1 个答案: