Vue for loop returning one value

Question

I'm getting an array of contractors from the database. I want it such that when the salary of one contractor is accepted, then the remaining contractors are removed from the 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>

This is the method that attempts to get rid of the remaining contractors after the salary of one has been accepted

  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 => {})
        }

The problem is that when I run the show_contractor in the HTML it returns the same value for all the contractors, And I want it to return true for the contractor whose salary has been accepted and false for all the others.

<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>

What about a method that handles filtering the accepted contractor and then running the results of that filter in your template? — rguttersohn
– rguttersohn, Commented Oct 20, 2020 at 13:23
Maybe stupid question but: Are you sure that the button will submit the form? — JohnRambo
– JohnRambo, Commented Oct 20, 2020 at 13:27

Dylan Landry · Accepted Answer · 2020-10-20 13:30:29Z

1

If I understand, it seems that show_contractor is a data property of your vue component that contains this v-for which renders contractors. It's not scoped to single contractors, so it's the same value for all of them.

Like @rguttersohn commented, I recommend a computed property which filters your list of contractors.

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

answered Oct 20, 2020 at 13:30

Dylan Landry

1,2601 gold badge12 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue for loop returning one value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related