Nuxt Axios 使用多个参数发布到 Laravel API答案

【问题标题】：Nuxt Axios post to Laravel API with multiple parametersNuxt Axios 使用多个参数发布到 Laravel API
【发布时间】：2020-12-15 06:34:20
【问题描述】：

我正在使用 nuxt axios 模块，我试图将它与一个对象一起发布，但这不起作用

async postOrder(data) {
try {
  await this.$axios.$post('orders', {
    form: data
    // other parameters..
  })

  .then(data => {
    console.log(data)
  });
  } catch(err) {
console.log(err);}

在 laravel 控制器中

        $this->validate($request, [
        'first_name' => 'required',
        'last_name' => 'required',
        'address_1' => 'required',
        'address_2' => 'required',
        'city' => 'required',
        'postcode' => 'required',
        'country_id' => 'required|exists:countries,id',
    ]);

    $address = new Address;
    $address->first_name = $request->first_name;
    $address->last_name = $request->last_name;
    $address->address_1 = $request->address_1;
    $address->address_2 = $request->address_2;
    $address->city = $request->city;
    $address->postcode = $request->postcode;
    $address->country_id = $request->country_id;
    $address->save();

如果我这样传递它会起作用我猜这与我使用表单的事实有关：数据？

await this.$axios.$post('orders', this.form)

【问题讨论】：

标签： laravel vue.js axios nuxt.js laravel-7

【解决方案1】：

可以像这样验证和发布

$this->validate($request, [
        'form.first_name' => 'required',
        'form.last_name' => 'required',
        'form.address_1' => 'required',
        'form.address_2' => 'required',
        'form.city' => 'required',
        'form.postcode' => 'required',
        'form.country_id' => 'required|exists:countries,id',
    ]);

    $address = new Address;
    $address->first_name = $request['form.first_name'];
    $address->last_name = $request['form.last_name'];
    $address->address_1 = $request['form.address_1'];
    $address->address_2 = $request['form.address_2'];
    $address->city = $request['form.city'];
    $address->postcode = $request['form.postcode'];
    $address->country_id = $request['form.country_id'];
    $address->save();

但也可以使用扩展运算符 ...this.form 并且不需要像上面那样在控制器中访问它们

enter async postOrder () {
  try {
     await this.$axios.$post('orders',{
      ...this.form,
      shipping_id: this.$store.state.shipping.id,
    })

  } catch (e) {

  }

【讨论】：

【解决方案2】：

您正在发布包装在 form 对象中的数据，因此您必须将验证规则更改为：

$this->validate($request, [
    'form.first_name' => 'required',
    'form.last_name' => 'required',
    etc...

您还应该检查控制台以查看从 Nuxt 应用中的 try/catch 捕获的错误异常。

【讨论】：