Изменение полей, созданных с помощью v-for, обновляет другие записи - PullRequest
Новая
       11

Изменение полей, созданных с помощью v-for, обновляет другие записи

0 голосов
/ 13 ноября 2018

У меня проблема с моими полями, созданными с помощью v-for, где сгенерированные мной поля влияют на все объекты, которые я передаю через цикл v-for.

Я создал уникальный идентификатор для каждого объекта, но по какой-то причине v-модель рассматривает его как тот же объект.

Вот фрагмент Vue, который выводит сгенерированные поля: 

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

Вот объект, который я прохожу через v-for как «возможности»

enter image description here

Я бы хотел, чтобы сгенерированные поля обновляли каждый объект в 'возможностях' независимо через v-модель.

Любая помощь или предложения с благодарностью! ^^

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Я это исправил!

Я сохранил возможности в массиве вместо объекта.

По какой-то причине v-модель вела себя странно, когда возможности хранились в объекте.

Вот структура для массива, который содержал объекты:

enter image description here

Вот цикл v-for, который я использовал: 

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

Это метод, который я использовал для добавления записей в массив: 

addEntry: function(entries, entryValue) {
            entries.push(entryValue());
            this.entryCount++;
        }
0 голосов
/ 13 ноября 2018

Попробуйте добавить : key = "index" здесь 

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

...