Search code examples
javascriptvue.jsvuejs2v-for

Changing fields generated with v-for is updating other entries

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'

enter image description here

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

Any help or suggestions are greatly appreciated! ^^

Solution

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

    enter image description here

    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++;
        }