vue.js vue-good-table 将 id 传递给 laravel 控制器答案

【问题标题】：vue.js vue-good-table passing id to laravel controllervue.js vue-good-table 将 id 传递给 laravel 控制器
【发布时间】：2019-12-09 19:28:42
【问题描述】：

大家好，我是 vue.js 和 vue-good-table 的新手。

我能够使用 console.log 获取行数据的 id，但我不知道如何将其传递给控制器以继续执行 put 或 delete 方法。

Department.vue 组件

<vue-good-table styleClass="vgt-table striped bordered condensed" 
....>
 <template slot="table-row" slot-scope="props">
  <span v-if="props.column.field == 'before'">
   <button class="btn btn-primary btn-block" @click="fetch(props)">Edit</button>
  </span>
</template>
</vue-good-table>

<script>
...
...
  methods: {
      fetch(props) {
            console.log(props.row.id);
}
</script>

【问题讨论】：

您应该使用您选择的 HTTP 客户端 （axios、ajax 等） 来构造对服务器的请求。因此，在fetch() 中，您应该执行类似this.axios.delete('/endpoint/to/call', {...}, {data: {id: props.row.id}}) 的操作。 （请记住，我上面使用的代码示例应根据您的设置进行更改。您不能将其用作最终解决方案）.
我在组件中试过这个 fetch(id) { axios.delete(/api/department/${id}) .catch(err => console.log(err));这是我的控制器： $article = Department::findOrFail($id); $文章->删除（）；但我遇到 500 内部服务器错误
我的错误路线是“DeparttmentController@delete”而不是 DpeartmentController@destroy。非常感谢！

标签： javascript laravel vue.js

【解决方案1】：

您可以使用任何 ajax 库来实现目标。例如 axios 在你的项目文件夹中做

npm install axios --save

在你的组件中添加

import axios from 'axios';

然后只需阅读文档并向您的控制器发出请求https://github.com/axios/axios

【讨论】：