Vue.js Vue computed不是删除项后的函数

我使用Nuxt显示从express API获取的联系人数据表。当我想删除一个联系人时，Nuxt会显示一条错误消息

this.contacts.filter不是一个函数

这里发生了什么？为什么它不再知道函数了

这是脚本代码的相关部分。计算属性位于底部

<script>
import axios from "axios"
export default {
    data() {
        return {
            searchTerm: '',
            contacts: [],
            nextBirthdays: [],
            popupActive: false,
            deleteItem: null
        }
    },
    methods: {
        change() {
            return this.contacts.filter(contact => {
                return contact.firstname.toLowerCase().includes(this.searchTerm.toLowerCase())
            })
        },
        closeModal() {
            this.popupActive = false;
        },
        openModal(id) {
            this.deleteItem = id;
            this.popupActive = true;
        },
        async deleteTodo() {

            const id = this.deleteItem
            const url = `http://localhost:8000/api/contacts/${id}`

            try {
                await axios.delete(url)
                const url2 = 'http://localhost:8000/api/contacts'

                this.contacts = await new Promise(async(resolve, reject) => {
                    try {
                        const res = await axios.get(url2);
                        const data = res.data;
                        JSON.stringify(data)
                        resolve(data);
                    } catch (error) {
                        reject(error);
                    }
                })
                this.deleteItem = null;

            } catch (error) {
                console.log(error)
            }
        },
    },
    computed: {
        filteredList: function() {
            cache: false,
            console.log("AM FILTERING")
            if (this.contacts) {
                return this.contacts.filter(contact => {
                    return contact.firstname.toLowerCase().includes(this.searchTerm.toLowerCase())
                })
            }
        }
    }
} 
</script>

从“axios”导入axios
导出默认值{
数据（）{
返回{
搜索词：“”，
联系人：[]，
下一个星期：[]，
popupActive:false，
deleteItem:空
}
},
方法：{
更改（）{
返回此.contacts.filter（contact=>{
return contact.firstname.toLowerCase（）.includes（this.searchTerm.toLowerCase（））
})
},
closeModal（）{
this.popupActive=false；
},
OpenModel（id）{
this.deleteItem=id；
this.popupActive=true；
},
异步deleteTodo（）{
const id=this.deleteItem
常量url=`http://localhost:8000/api/contacts/${id}`
试一试{
等待axios.delete（url）
常量url2=http://localhost:8000/api/contacts'
this.contacts=等待新承诺（异步（解析、拒绝）=>{
试一试{
const res=等待axios.get（url2）；
常数数据=分辨率数据；
JSON.stringify（数据）
解析（数据）；
}捕获（错误）{
拒绝（错误）；
}
})
this.deleteItem=null；
}捕获（错误）{
console.log（错误）
}
},
},
计算：{
filteredList:函数（）{
cache:false，
日志（“AM过滤”）
如果（这是联系人）{
返回此.contacts.filter（contact=>{
return contact.firstname.toLowerCase（）.includes（this.searchTerm.toLowerCase（））
})
}
}
}
} 

两件事

您的计算机应该始终返回一个数组作为filteredList的回退值

用一个单独的方法来分离你的逻辑

获取联系人（）{
返回新承诺（异步（解析、拒绝）=>{
试一试{
const res=等待axios.get（url2）；
常数数据=分辨率数据；
解析（数据）；
}捕获（错误）{
拒绝（错误）；
}
})
}

您的删除方法变为

deleteTodo（）{
const id=this.deleteItem
常量url=`http://localhost:8000/api/contacts/${id}`
试一试{
等待axios.delete（url）
this.fetchContacts（）
}捕获（错误）{
//TODO:句柄错误
控制台错误（错误）
}
}

this.contacts.filter不是函数。

是因为您的承诺没有返回数组