[Vuejs]-How to update more table rows at once using Laravel and Vuejs?

by

0👍

✅

I would consider having a single endpoint on your api where you submit the entire form.

api.php

Create a route that we can submit our axios request to:

Route::put('/settings', 'Api\SettingController@update')->name('api.settings.update');

Note that I have namespaced the controller as you will likely have a web and api version of this controller. Mixing your api and web actions in a single controller is not advisable.

web.php

This is a standard web route which will display a blade view containing the vue component. We pass through the settings which will then be passed to the Settings.vue component as a prop.

Route::get('/settings', 'SettingController@edit')->name('settings.edit');

edit.blade.php

<settings :settings="{{ $settings }}"></settings>

Settings.vue

axios.put('/api/settings', {
  header: this.form.header,
  background_image: this.form.background_image
  ... other fields to be submitted
})
.then(success => {
  console.log(success);
})
.catch(error => {
  console.log(error);
});

SettingController.php

public function edit()
{
  return view('settings.edit', ['settings' => Setting::all()]);
}

Api\SettingController.php

public function update(Request $request)
{
  $validator = Validator::make(
    $request->all(),
    [
      'header' => ['required', 'string'],
      'background_image' => ['required', 'string']
      ... other fields to be validated
    ]
  );

  if ($validator->fails()) {
    return response()->json(['errors' => $validator->errors()], 422);
  }

  foreach ($validator->validated() as $property => $content) {
    Setting::where('property', $property)->update(['content' => $content]);
  }

  return response()->json(['success' => true], 200);
}

You might want to consider splitting settings into groups and submitting groups rather than the entire form, or submitting each setting individually (where it makes sense to do so).

Leave a comment