Nrthugu

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

        }