javascript - Vue Duplicate keys detected

Question

I have some problems with migrating my vue app from vuesax to bootstrap. I never worked with bootstrap and Vue, so it's kinda hard to adopt the first day. I a problem like

Duplicate keys detected: '133'.

showing in console, and I have no idea why. I'm using the same scripts as in vuesax but HTML is different. So I have form repeater that looks like:

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

And this is scripts

This is how I catch countries from backend:

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

This is data (product_info is form repeater, packages as well but I haven't migrated it yet):

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

And those are methods for form repeater:

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

The error is coming from:

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

And I have no idea what could cause the problem. Any suggestions?

question from:https://stackoverflow.com/questions/65938811/vue-duplicate-keys-detected

Answer 1

The problem was a duplicate key entry in the database. I had 2 same countries.