Vue.js axios delete方法删除数组中错误的对象
[英]Vue.js Axios delete method deleting the wrong object in the array
问题描述
我有一个问题，我的 axios.delete 方法正在删除数组中的错误对象。 总共有 3 个对象，来自 api，当我在 index.html 文件中删除时，id 为 2 和 3 的对象很好，但是当我在 index.html 文件中删除时，它会抛出“未捕获（承诺）错误：请求失败，状态代码为 404”错误我尝试删除来自我的 API 的数组中的第一个对象。
我的索引文件（包括删除按钮）
<body>
<div id="app">
<template v-for="(results, index) in result">
<div class="card" style="width: 20rem; display:inline-block;">
<div class="card-block">
<p>{{ results }}</p>
<button type="button" class="btn btn-danger pull-right" data-toggle="modal" v-on:submit.prevent="deleteData(index)" @click="deleteData(results, index) in result">Delete</button>
<h1> {{ results.comments}} </h1>
</div>
</div>
</template>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="src/main.js"></script>
主程序
var vm = new Vue ({
el: '#app',
data: {
result: ''
},
created: function(){
this.getResult();
},
methods: {
deleteData: function(result, id) {
axios.delete('https://my-json-server.typicode.com/json/posts/' + id)
.then(response => {
this.result.splice(id, 1)
console.log(this.result);
});
},
getResult: function() {
// this.results = 'Loading...';
axios.get('https://my-json-server.typicode.com/json/db')
.then(response => {
// console.log(response.data);
this.result = response.data.posts;
console.log(this.result);
});
}
}
});
3 个解决方案
解决方案1
6 已采纳 2018-01-10 23:42:39
正如我所看到的，您将两个参数传递给您的deleteData方法。 第二个参数是结果数组的索引，它不是你真正的结果 ID。
在这里，你只需要用这个替换你的deleteData方法：
deleteData: function(result, id) {
axios.delete('https://my-json-server.typicode.com/json/posts/' + result.id)
.then(response => {
this.result.splice(id, 1)
console.log(this.result);
});
},
正如您在上面看到的，我们刚刚通过result.id更改了您的id
解决方案2
0 2018-01-10 23:22:39
改变
<button type="button" class="btn btn-danger pull-right" data-toggle="modal" v-on:submit.prevent="deleteData(index)" @click="deleteData(results, index) in result">Delete</button>
到
<button type="button" class="btn btn-danger pull-right" data-toggle="modal" @click="deleteData(results, index)">Delete</button>
解决方案3
-1 2020-11-20 15:17:50
这是一个 404 错误，意味着它无法访问该页面。 可能是链接不对。 请再看一遍网址！ 同样的事情发生在我身上，然后我意识到我试图访问的 URL 不正确。
在 Vue.js 中删除对象
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.