更改使用 v-for 生成的字段正在更新其他条目

Question

我在使用 v-for 生成的字段时遇到问题，我生成的字段影响了我通过 v-for 循环传递的所有对象。

我已经为每个对象创建了一个唯一标识符，但出于某种原因，v-model 将其视为同一个对象。

这是输出生成字段的 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 作为 'opportunities'

传递的对象

我希望生成的字段能够通过 v-model 独立地更新 'opportunitues' 中的每个对象。

非常感谢任何帮助或建议！ ^^

Answer 1

尝试在此处添加 :key="index"

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

Answer 2

我修好了！

我将机会存储在数组而不是对象中。

由于某些原因，当机会存储在对象中时，v-model 表现得很奇怪。

这是包含对象的数组的结构：

这是我使用的 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++;
        }

更改使用 v-for 生成的字段正在更新其他条目

Changing fields generated with v-for is updating other entries

javascript

vue.js

vuejs2

v-for