Question

vue js的新手，我发现它在某些方面有些混乱，但这是我正面临的最新困惑。

例如，我想删除id为3的行，但其在列表中的位置为0，当单击delete时，它将在控制台中返回错误：

DELETE http://simvuecore/api/contoh/0 404 (Not Found)

这意味着axios在控制器期望position的同时发送id，尽管实际上id并未在其中声明。

为了参考，这是我的代码：

API routes：

Route::delete('/contoh/{contoh}', 'contohController@destroy');

contohController：

public function destroy(contoh $contoh)
{
    $contoh->delete();
    return response('terhapus', 200);
}

store.js：

state: {
    contoh: []

},
mutations: {
        deleteContoh(state, id) {
            const index = state.contoh.findIndex(item => item.id == id)
            state.contoh.splice(index, 1)
        }
},
actions: {
    deleteContoh(context, id) {
        axios.delete('api/contoh/' + id)
            .then(response => {
                context.commit('deleteContoh', id)
            })
    },
}

contohItem.vue：

methods: {
        removeContoh(id) {
            this.$store.dispatch('deleteContoh', id)

        },

在使用POSTMAN并从vue请求时，所有CRUD操作都能正常工作，由于此delete和position问题，id是唯一不起作用的操作

问题：如何告诉axios发送id而不是position到控制器？

更新：通过遵循@andrey popov的答案解决了问题。我在contohItem.vue中有这个东西：

    <span @click="removeContoh(index)" class="remove-contoh">X</span>

，并且在我将其更改为此后，它会起作用：

    <span @click="removeContoh(id)" class="remove-contoh">X</span>

Answer 1

从您的代码中，我可以看到您一直沿函数传递id，并且deleteContoh动作实际上将其发送到服务器。这意味着您调用removeContoh的方式存在问题-您传递的不是id而是index，因此您应该更改它。

祝你好运！

Axios在删除时将POSITION而不是ID发送给控制器

1 个答案: