Vue.js：添加新项目后从列表中删除项目导致错误

Question

<li v-for="(l, i) of lineList" :key="l._id"> 

data () {
        return {
            lineList: []
        }
    },
    methods: {
         query() {
            axios.get(domain + 'line')
                    .then((res) => {
                        this.lineList = res.data.data;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
        },
        add() {
            axios.post(domain + 'line', {line: '432432'})
                    .then(res => {
                        this.lineList.unshift(res.data.data);
                    })
                    .catch(error => {
                        console.log(error);
                    });
        },
        remove(line, i) {
            axios.delete(domain + 'line/' + line._id)
                    .then(res => {
                        this.lineList.splice(i, 1);
                    })
                    .catch(err => {
                        console.log(error);
                    });
        }
    },

以上是我 project.I 的代码片段，我使用的是最新版本的 vue.js 2.

我的问题是，当我尝试在 this.add() 之后执行 this.remove() 时，删除了错误的项目，我完全不知道为什么，有人知道请告诉我，谢谢！

Answer 1

如果我是你，我会尝试以下方法：

remove(line) {
    axios.delete(domain + 'line/' + line._id)
    .then(res => {
        let index = this.lineList.indexOf(line)
        this.lineList.splice(index, 1);
    })
    .catch(err => {
        console.log(error);
    });
}

有了这个，由于 let index = this.lineList.indexOf(line)

，您可以确保在要删除项目时拥有正确的索引

Vue.js：添加新项目后从列表中删除项目导致错误

Vue.js : removing item from list after added a new item caused a bug

javascript

list

vue.js

vuejs2