从vue

时间:2018-02-09 09:25:42

标签: arrays laravel vue.js

现在我用公司过滤数组。过滤器仅返回活动为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);
}

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);
        });
}
  
      
  1. 使用company.id作为键而非索引
  2.   
  3. 按ID删除项目,而不是按索引
  4. 删除   
  5. 使用arrow function response =&gt;,因此您可以在
  6. 中使用此功能   
  7. 仅在请求成功完成后删除项目
  8.