检测到 Vue 重复键

Question

我在将我的 vue 应用程序从 vuesax 迁移到 bootstrap 时遇到了一些问题。我从来没有使用过 bootstrap 和 Vue，所以第一天就很难接受。 我有问题

检测到重复键：“133”。

显示在控制台中，我不知道为什么。我使用与 vuesax 中相同的脚本，但 HTML 不同。 所以我的表单转发器看起来像：

<b-row v-for="(product_info, index) in form.product_info">
                        <b-col cols="12" class="mb-2" :style="{animation: 'fadeInDown 0.5s'}">

                            <validation-provider #default="{ errors }" name="Country" rules="required">
                                <b-form-group label="Country" label-for="country" :state="errors.length > 0 ? false:null">
                                    <v-select id="country" v-model="product_info.country" :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'" :options="activeCountries" :selectable="option => ! option.value" label="name" />
                                    <b-form-invalid-feedback :state="errors.length > 0 ? false:null">
                                        {{ errors[0] }}
                                    </b-form-invalid-feedback>
                                </b-form-group>
                            </validation-provider>

                            <validation-provider #default="{ errors }" name="Name" rules="required">
                                <b-form-group label="Name" label-for="name" :state="errors.length > 0 ? false:null">
                                    <b-form-input color="success" label-placeholder="Name" v-model="product_info.name" name="name" type="text" />
                                    <b-form-invalid-feedback :state="errors.length > 0 ? false:null">
                                        {{ errors[0] }}
                                    </b-form-invalid-feedback>
                                </b-form-group>
                            </validation-provider>

                            <validation-provider #default="{ errors }" name="Slug" rules="required">
                                <b-form-group label="Slug" label-for="slug" :state="errors.length > 0 ? false:null">
                                    <b-form-input color="success" label-placeholder="Slug" v-model="product_info.slug" name="slug" type="text" />
                                    <b-form-invalid-feedback :state="errors.length > 0 ? false:null">
                                        {{ errors[0] }}
                                    </b-form-invalid-feedback>
                                </b-form-group>
                            </validation-provider>

                            <validation-provider #default="{ errors }" name="Description" rules="required">
                                <b-form-group label="Description" label-for="description" :state="errors.length > 0 ? false:null">
                                    <b-form-textarea v-model="product_info.description" label="Discription" class="md:mt-10 mt-6 mb-0" rows="3" type="text" name="description" />
                                    <b-form-invalid-feedback :state="errors.length > 0 ? false:null">
                                        {{ errors[0] }}
                                    </b-form-invalid-feedback>
                                </b-form-group>
                            </validation-provider>

                            <b-button v-ripple.400="'rgba(113, 102, 240, 0.15)'" variant="outline-primary" pill @click="deleteProductInfo(index)">x</b-button>
                        </b-col>
                    </b-row>
                    <b-button v-ripple.400="'rgba(113, 102, 240, 0.15)'" variant="outline-primary" pill @click="addProductInfo">Add Product Info</b-button>

这是脚本

这就是我从后端捕获国家/地区的方式：

mounted() {
        Countries.activeCountries().then(response => {
            this.activeCountries = response.data.countries
        });
    },

这是数据（product_info 是表单转发器，包也是，但我还没有迁移它）：

form: {
                sku: '',
                slug: '',
                category: '',
                type: '',
                product_info: [],
                packages: [],
            },

这些是表单转发器的方法：

addProductInfo: function () {
            this.form.product_info.push({
                country: '',
                name: '',
                slug: '',
                description: ''
            });
        },
        deleteProductInfo: function (index) {
            this.form.product_info.splice(index, 1);
        },

错误来自：

<v-select id="country" v-model="product_info.country" :dir="$store.state.appConfig.isRTL ? 'rtl' : 'ltr'" :options="activeCountries" :selectable="option => ! option.value" label="name" />

而且我不知道是什么导致了这个问题。有什么建议吗？

Answer 1

问题是数据库中有重复的键条目。我有两个相同的国家。