Nuxt Axios post 到 Laravel API 具有多个参数

Question

我正在使用 nuxt axios 模块我正在尝试 post 它与一个对象，但这不起作用

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();

如果我像这样传递它，它会起作用我猜这与我使用 form: data 的事实有关？

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

Answer 1

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

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

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

Answer 2

可以像这样post验证

$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) {

  }

},

Nuxt Axios post 到 Laravel API 具有多个参数

Nuxt Axios post to Laravel API with multiple parameters

laravel

vue.js

axios

nuxt.js

laravel-7