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);
        });
}

使用company.id作为键而非索引

按ID删除项目，而不是按索引
删除
使用arrow function response =＆gt;，因此您可以在
中使用此功能
仅在请求成功完成后删除项目

从vue

1 个答案: