从 vue 组件获取价值并提交的问题答案

【问题标题】：Problem getting value from vue component and submit从 vue 组件获取价值并提交的问题
【发布时间】：2019-11-04 02:16:11
【问题描述】：

我正在使用 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 时，元素中的数据如下：

提前致谢。

【问题讨论】：

您收到了什么错误信息？发送时selectedMonth 的值是多少？（顺便说一句，和上一个问题有关，你用的是 Vue Devtools 吗？）
我们能在 UserController 中看到你的 setDate 方法吗？我认为问题在于数据验证。
是的，我使用 Vue Devtools。我已经使用元素 MyCalendar 的 vue devtools 数据更新了我的问题。
谢谢。我能够找到问题所在。主要是因为控制器验证。因为我没有在发布数据中设置键，所以我无法在控制器中获取值进行验证。我已经更新了关键日期{date: this.selectedMonth}，现在我在控制器中获取日期并验证。

标签： vue.js laravel-5.8

【解决方案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);
}

【讨论】：