从Vue中的过滤数组中删除项目

Question

现在我过滤了一个包含公司的数组。过滤器仅返回在 true 上处于活动状态的公司。那是可行的，但是..当我尝试从过滤后的数组中删除带有拼接的项目时，它不起作用。

过滤器：

computed: {
    activeCompanies() {
        return this.companies.filter((company) => {
            return company.active;
        });
    }
}

模板：

<div v-for="(company, index) in activeCompanies">
    <h2>{{ company.name }}</h2>
    <p>{{ company.description }}</p>
    <p>{{ company.id }}</p>

    <a @click="archiveCompany(company.id, index)">Archive</a>
</div>

当我尝试从 activeCompanies 数组拼接时：

archiveCompany(id, index) {

    axios.put('/api/companies/archive/' + id)
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });

    this.activeCompanies.splice(index, 1);
}

Answer 1

你可以试试这个吗？

<div v-for="company in activeCompanies" :key="company.id">
    <h2>{{ company.name }}</h2>
    <p>{{ company.description }}</p>
    <p>{{ company.id }}</p>

    <a @click="archiveCompany(company.id)">Archive</a>
</div>


archiveCompany(id) {

    axios.put('/api/companies/archive/' + id)
        .then(response => {
            this.companies = this.companies.filter(x => x.id !== id)
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
}

1. 使用 company.id 作为键而不是索引
2. 按 id 而不是按索引删除项目
3. 使用箭头函数响应=>，所以你可以在里面使用这个
4. 仅在您的请求成功完成后移除项目