반응형
Vue.js Axios 삭제 방법 어레이에서 잘못된 개체 삭제
axios.delete 메서드에서 어레이 내의 잘못된 개체를 삭제하는 문제가 있습니다.index.html 파일에서 삭제할 때 api에서 가져온 오브젝트는 총 3개입니다.ID가 2개, 3개인 오브젝트는 정상입니다만, 어레이 내의 첫 번째 오브젝트를 API에서 삭제하려고 하면 "Uncatched (in promise) Error: Request failed with status code 404" 오류가 발생합니다.
내 인덱스 파일(삭제 버튼 포함)
<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>
Main.js
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);
});
}
}
});
내가 볼 수 있는 한, 당신은 두 개의 파라멜을 통과해서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);
});
},
위에서 볼 수 있듯이, 우리는 방금 당신의 것을 바꿨습니다.id타고result.id
바꾸다
<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>
404 에러입니다.페이지에 접속할 수 없습니다.링크가 잘못되었을 수 있습니다.URL을 다시 한 번 봐주세요!저도 같은 일이 일어났는데, 제가 접속하려고 했던 URL이 틀렸다는 것을 알게 되었습니다.
언급URL : https://stackoverflow.com/questions/48197136/vue-js-axios-delete-method-deleting-the-wrong-object-in-the-array
반응형
'programing' 카테고리의 다른 글
| Java에서 파일에서 줄 바꿈을 제거하려면 어떻게 해야 합니까? (0) | 2022.07.10 |
|---|---|
| Java에서 문자열에 숫자만 포함되어 있는지 확인하는 방법 (0) | 2022.07.10 |
| Vue.js - "속성 또는 메서드가 정의되어 있지 않습니다"에 대한 v-.js (0) | 2022.07.10 |
| x264 C API를 사용하여 일련의 이미지를 H264로 인코딩하려면 어떻게 해야 합니까? (0) | 2022.07.06 |
| 크기를 확인하거나 범위를 벗어나지 않고 문자열의 첫 번째 n자를 가져오려면 어떻게 해야 합니까? (0) | 2022.07.05 |