I've implemented a sleek slider on my website to showcase images with accompanying text to visitors. The slider utilizes owl carousel within a vue component and is functioning properly. Now, I'm attempting to add a delete button so that users who created the slider can remove any unwanted images.
My starting point was the controller:
public function destroy(Request $request, Slide $slide)
{
$slide = Slide::where('id', $request->id);
$slide->delete();
return response()->json($slide, 200);
}
Additionally, I have route groups set up as follows:
Route::group(['prefix' => '/{area}'], function () {
Route::group(['middleware' => ['auth']], function () {
Route::post('/{hustle}', 'Slides\SlideController@save')->name('slide.save');
Route::delete('/{hustle}/slider/{slide}', 'Slides\SlideController@destroy')->name('slide.destroy');
});
Route::get('/{hustle}/slider', 'Hustle\SliderController@index');
});
Here's what the delete button code looks like:
<button @click="deleteSlide">Delete</button> {{ slider.uid }}
Lastly, here is the method being used:
methods: {
getSlider () {
var that = this;
axios.get( '/' + this.areaId + '/' + this.hustleId + '/slider').then((response) => {
that.sliders = response.data;
console.log(that.sliders);
Vue.nextTick(function() {
$('#sliders').owlCarousel({
items:1,
});
});
})
.catch(error => {
console.log(error)
this.errored = true
});
},
deleteSlide (slider) {
var that = this;
axios.delete('/' + this.areaId + '/' + this.hustleId + '/slider/' + this.sliderId).then((response) => {
that.slider.splice(slider, 1)
console.log(that.sliderId);
});
}
},
Despite my efforts, I keep encountering a "500 bad method" error message. Even with the debug bar enabled, the issue persists. Any ideas on how to resolve this?