django rest framework - PATCH request only targeting the first item in an array in Vue v-for loop

Question

I have a pantry app I recently built as a school project and I've noticed a bug where a form in a modal only updates the first item in the v-for loop it is in, instead of the item its bound to. It is made with Vue2 and has a DjangoREST api.

The code for the form is:

<b-button  
    id="editquantitybtn" 
    v-bind:key="item.id" 
    type="button" 
    class="btn btn-primary" 
    v-show="!grocery_view" 
    data-toggle="modal" 
    data-target="#editItemModal">Update <br> Quantity
</b-button>
<div class="modal fade" id="editItemModal" tabindex="-1" role="dialog"  aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header">
             <h5 class="modal-title" id="modalTitle">EDIT ITEM</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
             </button>
          </div>
          <form v-on:submit.prevent="updateItem(item)">
             <div class="modal-body">
                <div class="form-group">
                   <label :for="item.id">Update Quantity</label>
                   <input
                     type="number"
                     class="form-control"
                     :id="item.id"
                     placeholder="Update Quantity"
                     v-model="item.quantity"
                   >
                </div>
              </div>
           <div class="modal-footer">
              <button type="button" 
                  class="btn btn-secondary m-progress" 
                  data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary" >Save changes</button>
                                                
             </div>
           </form>
       </div>
    </div>
            
</div>

and here is the updateItem function:

updateItem: function(item) {
            axios({
                method: 'PATCH',
                url: `/apis/v1/pantry/${item.id}/`,
                headers: {
                    'X-CSRFToken': this.csrf_token
                },
                data: {
                    quantity: item.quantity,
                    to_grocery: item.to_grocery,
                    getting_low: item.getting_low,
                    expiring_soon: item.expiring_soon,

                },
            }).then(response => {
                this.loadItems()
            })
        },

When looking at the Network tab in Chrome devtools each Update Quantity button sends the PATCH request to item 42, the first item in the array of items being looped over.

Any ideas?

question from:https://stackoverflow.com/questions/65854438/patch-request-only-targeting-the-first-item-in-an-array-in-vue-v-for-loop

Answer 1

Waitting for answers