列表项从下到上删除,但不是从上到下
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了列表项从下到上删除,但不是从上到下相关的知识,希望对你有一定的参考价值。
我列出了链接上的项目列表。在每个元素附近有一个按钮,当点击该按钮时,该元素应该从网站和api中删除。事实是,当我点击删除按钮时,api和网站上的所有内容都是正常的,如果从下往上删除元素,这是正常的,如果从上到下,则无法正常工作。我知道问题在于拼接参数,但我不知道如何修复它。
<template>
<div id="app">
<ul>
<li v-for="(post, id) of posts">
<p>{{ post.title }}</p>
<p>{{ post.body }}</p>
<button @click="deleteData(post.id)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'app',
data () {
return{
posts: [],
}
},
created(){
axios.get('http://jsonplaceholder.typicode.com/posts').then(response => {
this.posts = response.data
})
},
methods: {
deleteData(id) {
axios.delete('http://jsonplaceholder.typicode.com/posts/' + id)
.then(response => {
console.log('delete')
this.posts.splice(id-1, 1)
})
.catch(function(error) {
console.log(error)
})
},
}
}
</script>
答案
这里的id
实际上是指数,而不是真正的post.id
,而splice()
采用起始指数,请参阅签名here:
<li v-for="(post, id) of posts">
<!----------------^^--- This is essentially posts[index] -->
因此,请尝试执行以下操作:
<template>
<div id="app">
<ul>
<li v-for="(post, index) of posts">
<p>{{ post.title }}</p>
<p>{{ post.body }}</p>
<button @click="deleteData(index, post.id)">Delete</button>
</li>
</ul>
</div>
</template>
methods: {
deleteData(index, id) {
axios
.delete('http://jsonplaceholder.typicode.com/posts/' + id)
.then(response => {
this.posts.splice(index, 1);
})
.catch(function (error) {
console.log(error)
})
},
}
以上是关于列表项从下到上删除,但不是从上到下的主要内容,如果未能解决你的问题,请参考以下文章