现在我用公司过滤数组。过滤器仅返回活动为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);
}
答案 0 :(得分:0)
你能试试吗?
<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;,因此您可以在
中使用此功能- 仅在请求成功完成后删除项目
醇>