Question

我从数据库中得到了一系列承包商。我希望这样，当接受一个承包商的薪水时，其余的承包商将从DOM中删除。

<div v-for="contractor in contacted_contractors" :key="contractor.id">

    <form @submit.prevent="acceptSalary(contractor.user_id, contractor.maintenance_id)">
       <button>Accept salary</button>
    </form>

</div>

这种方法是在一个人的薪水被接受后试图摆脱剩余的承包商

  async acceptSalary (user_id, maintenance_id) {
            this.accept_salary.maintenance_id = maintenance_id;
            this.accept_salary.user_id = user_id;
            await axios.post('/api/maintenances/respond/budget', this.accept_salary).then(response => {
                    this.salary_accepted = true

                    for (let i = 0; i < this.contacted_contractors.length; i++) {
                        if(this.contacted_contractors[i].user_id == this.accept_salary.user_id){

                        this.show_contractor = true
                        }

                        else{
                        this.show_contractor = false

                        }
                    return this.show_contractor
                    }

        })
        .catch(error => {})
        }

问题是，当我在HTML中运行show_contractor时，它将为所有承包商返回相同的值，并且我希望它为已被接受工资的承包商返回true，而对于所有其他承包商返回false

<div v-for="contractor in contacted_contractors" :key="contractor.id">
    {{ show_contractor }}
    <form @submit.prevent="acceptSalary(contractor.user_id, contractor.maintenance_id)">
       <button>Accept salary</button>
    </form>

</div>

Answer 1

据我了解，show_contractor似乎是您的vue组件的数据属性，其中包含呈现该承包商的v-for。它不限于单个承包商，因此对所有承包商来说都是相同的价值。

就像@rguttersohn一样，我建议您使用一个可计算的属性来过滤您的承包商列表。

<div v-for="contractor in accepted_contractors">
  {{contractor}}
</div>

accepted_contractors() {
  return this.contacted_contractors.filter(contractor => {
    return contractor.user_id === this.accept_salary.user_id
  })
}

Vue for循环返回一个值

1 个答案: