Nuxt Axios 使用多個參數發布到 Laravel API

Question

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

如果我像這樣傳遞它，它會起作用我猜這與我使用 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

可以像這樣驗證和發布

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

  }

},