Dfyjkt

I am having an issue with my fields generated with v-for, where the fields I have generated are affecting all the objects I am passing through the v-for loop.

I have created a unique identifier for each object, but for some reason v-model is treating it as the same object.

Here is the Vue snippet which outputs the generated fields:

<div class="row margin-15-bot margin-15-top" v-for="(opportunity, index) in opportunities">
 <div class="col-3">
 <v-select :options="opportunityChoices" v-model="opportunity.bookable_opportunity_ID" placeholder="Select Charity"></v-select>
 <input title="Select an Opportunity" :name="setOpportunityFieldName('bookable_opportunity_ID', index)"
 :value="opportunity.bookable_opportunity_ID.id ? opportunity.bookable_opportunity_ID.id : 0" type="text" hidden/>
 </div>
 <div class="col-2">
 <v-datepicker :name="setOpportunityFieldName('date', index)" v-model="opportunity.date" placeholder="Date"></v-datepicker>
 </div>
 <div class="col-2">
 <input type="time" :name="setOpportunityFieldName('start_time', index)" v-model="opportunity.start_time" v-validate="'required'"
 :class="'vee-error-field' : errors.has(setOpportunityFieldName('start_time', index))" class="bnfo-database-fields-border"
 step="900" title="Shift Start Time"/>
 </div>
 <div class="col-2">
 <input type="time" :name="setOpportunityFieldName('end_time', index)" v-model="opportunity.end_time" v-validate="'required'"
 :class="'vee-error-field' : errors.has(setOpportunityFieldName('end_time', index))" class="bnfo-database-fields-border" step="900"
 title="Shift End Date">
 </div>
 <div class="col-1">
 <input type="number" :name="setOpportunityFieldName('max_par_req', index)" v-model.number="opportunity.max_par_req" v-validate="'required|min_value:1'"
 :class="'vee-error-field' : errors.has(setOpportunityFieldName('max_par_req', index))"
 class="bnfo-database-fields-border" title="Shift's Maximum Participants">
 </div>
 <div class="col-1 text-center">
 <v-delete-button :entries="opportunities" :entry-key="index"></v-delete-button>
 </div>
 </div>
 </div>

Here is the object I am passing through the v-for as 'opportunities'

I would like the fields generated to update each object in 'opportunitues' independently via v-model.

Any help or suggestions are greatly appreciated! ^^

Try to add :key="index" here

<div class="row margin-15-bot margin-15-top" v-for="(opportunity, index) in opportunities" :key="index">

I fixed it!

I stored the opportunities in an array instead of an object.

For some reason v-model was behaving weird when the opportunities were stored in the object.

Here is the structure for the array which contained the objects:

Here is the v-for loop I used:

<div class="row margin-15-bot margin-15-top" v-for="(opportunity, key) in opportunities" :key="opportunity.id">
 <div class="col-3">
 <v-select :options="opportunityChoices" v-model="opportunity.bookable_opportunity_ID" placeholder="Select Charity"></v-select>
 <input title="Select an Opportunity" :name="setOpportunityFieldName('bookable_opportunity_ID', key)"
 :value="opportunity.bookable_opportunity_ID.id ? opportunity.bookable_opportunity_ID.id : 0" type="text" hidden/>
 </div>

This is the method I used to add the entries to the array:

addEntry: function(entries, entryValue) 
 entries.push(entryValue());
 this.entryCount++;