javascript - 使用 laravel、vue.js 和 axios 删除 owl 幻灯片

Question

我有一个漂亮的小 slider ，它向页面访问者显示带有一些文本的图像。它在 vue 组件中使用 owl carousel，并且基本上按预期工作。我正在尝试添加一个删除按钮，以便创建 slider 的用户可以在不喜欢图像或其他情况时删除图像。

我从 Controller 开始

public function destroy(Request $request, Slide $slide)
{
    $slide = Slide::where('id', $request->id);
    $slide->delete();

    return response()->json($slide, 200);
}

我有路线组已编辑

    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');
    });

按钮本身看起来就像这样

 <button @click="deleteSlide">Delete</button> {{ slider.uid }}

最后是方法

已编辑

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

  }
},

我得到的错误只是 500 bad method call，即使这样，调试栏也给出了 bad method call。

Answer 1

我没有足够的代表来发表评论，但是......

乍一看，您的路线有两个参数:喧嚣和滑行。
您将 4 个参数传递给 axios:area、hu​​STLe、 slider 字符串和 id

所以这是一条完全不同的路线:)