vue js error when adding bonus items to another item

Question

good afternoon, I don't understand English much, but I will try to express and make clear a problem that I have and I couldn't solve even with chatgpt.

I have a billing project, I have an error when adding bonus items to another item. example: item: paneton, I add 2 bonuses sugar and milk, these are bonus type: in view e it shows paneton, milk and milk, it should show me paneton, sugar and milk, I have a problem in the loop handling the item model I can't solve it here is the extract of my view in vue js:

reChangeItem(bonus_items, random_key, qty = 1) {
            if (qty < 1) {
                return;
            }

            bonus_items = bonus_items.map((b) => b.item_bonus);
    
            let temp = [...this.items];
            this.items = bonus_items;

            this.temp_qty = qty;

            console.log("bonus_items: ", bonus_items);
            console.log("temp: ", temp);

            bonus_items.forEach((bonus) => {
                let { id } = bonus;
                this.form.item_id = id;
                //console.log("id: ", id);
                //console.log("bonus: ", bonus);
                //console.log("formulario: ", this.form);
                this.changeItem();
                this.clickAddItem(random_key);
            });
            
            this.temp_qty = null;
            this.items = temp;
        },

changeItem:

async changeItem() {
        this.clearExtraInfoItem()

        this.form.item = _.find(this.items, {'id': this.form.item_id});
        this.form.item = this.setExtraFieldOfitem(this.form.item)
        this.form.item_unit_types = _.find(this.items, {'id': this.form.item_id}).item_unit_types
        this.form.unit_price_value = this.form.item.sale_unit_price;
        this.lots = this.form.item.lots

        this.form.has_igv = this.form.item.has_igv;
        this.form.has_plastic_bag_taxes = this.form.item.has_plastic_bag_taxes;
        this.form.affectation_igv_type_id = this.form.item.sale_affectation_igv_type_id;
        this.form.quantity = 1;
        this.cleanTotalItem();
        this.showListStock = true


        //asignar variables isc
        this.form.has_isc = this.form.item.has_isc
        this.form.percentage_isc = this.form.item.percentage_isc
        this.form.system_isc_type_id = this.form.item.system_isc_type_id


        if (this.hasAttributes()) {
            const contex = this
            this.form.item.attributes.forEach((row) => {

                contex.form.attributes.push({
                    attribute_type_id: row.attribute_type_id,
                    description: row.description,
                    value: row.value,
                    start_date: row.start_date,
                    end_date: row.end_date,
                    duration: row.duration,
                })
            })
        }

        this.form.lots_group = this.form.item.lots_group
        this.setExtraElements(this.form.item);

        this.has_list_prices = false;
        if (this.form.item.name_product_pdf && this.config.item_name_pdf_description) {
            this.form.name_product_pdf = this.form.item.name_product_pdf;
        }

        this.addDescriptionToDocumentItem()

        this.getLastPriceItem()

    },

clickAddItem:

async clickAddItem()
    {
        console.log(this.form);
        if(this.isRestrictedForSale) return this.$message.error('No puede agregar el producto, está restringido para venta.')

        if (this.applyValidateStock()) {
            const validate_current_stock = await this.validateCurrentStock()
            if (!validate_current_stock.success) return this.$message.error(validate_current_stock.message)
        }

        if(this.config.condition_sale_purchase_price_to_item) {
            if (this.form.unit_price_value < this.form.item.purchase_unit_value) return this.$message.error('El Precio Unitario debe ser mayor o igual al costo de compra');
        }


        if (this.isNoteErrorDescription) {
            if (parseFloat(this.form.unit_price_value) < 0) return this.$message.error('El Precio Unitario debe ser mayor o igual 0');
        } else {
            if (parseFloat(this.form.unit_price_value) <= 0) return this.$message.error('El Precio Unitario debe ser mayor a 0');
        }

        // if(this.form.quantity < this.getMinQuantity()){
        //     return this.$message.error(`La cantidad no puede ser inferior a ${this.getMinQuantity()}`);
        // }
        this.validateQuantity()

        if (this.form.item.lots_enabled) {
            if (!this.form.IdLoteSelected)
                return this.$message.error('Debe seleccionar lote.');
        }
        let extra = this.form.item.extra

        if (this.validateTotalItem().total_item) return;

        let affectation_igv_type_id = this.form.affectation_igv_type_id
        // let unit_price = (this.form.has_igv) ? this.form.unit_price_value : this.form.unit_price_value * 1.18;
        let unit_price = this.form.unit_price_value;
        if (this.form.has_igv === false) {
            if (
                affectation_igv_type_id === "20" ||
                affectation_igv_type_id === "21" ||
                affectation_igv_type_id === "40"
            ) {
                // do nothing
                // exonerado de igv
            } else {
                unit_price = this.form.unit_price_value * (1 + this.percentageIgv);

            }
        }


        //validar precio compra y venta
        if (this.configuration) {
            if (this.configuration.validate_purchase_sale_unit_price) {
                let val_purchase_unit_price = parseFloat(this.form.item.purchase_unit_price)

                if (val_purchase_unit_price > parseFloat(unit_price)) {
                    return this.$message.error(`El precio de compra no puede ser superior al precio de venta (P. Compra: ${val_purchase_unit_price})`)
                }
            }
        }


        this.form.input_unit_price_value = this.form.unit_price_value;

        this.form.unit_price = unit_price;
        this.form.item.unit_price = unit_price;
        this.form.item.presentation = this.item_unit_type;
        this.form.affectation_igv_type = _.find(this.affectation_igv_types, {'id': affectation_igv_type_id});

        let IdLoteSelected = this.form.IdLoteSelected
        let document_item_id = this.form.document_item_id
        this.row = calculateRowItem(this.form, this.currencyTypeIdActive, this.exchangeRateSale, this.percentageIgv);

        this.row.item.name_product_pdf = this.row.name_product_pdf || '';
        if (this.recordItem) {
            this.row.indexi = this.recordItem.indexi
        }

        let select_lots = await _.filter(this.row.item.lots, {'has_sale': true})
        let un_select_lots = await _.filter(this.row.item.lots, {'has_sale': false})

        if (this.form.item.series_enabled) {
            if (select_lots.length != this.form.quantity)
                return this.$message.error('La cantidad de series seleccionadas son diferentes a la cantidad a vender');
        }

        //xxxxxxxxxx
        let { has_bonus_item, bonus_items } = this.form.item;
        //this.row.sizes_selected = this.sizes;
        let general_random_key = null;
        if (has_bonus_item) {
            let random_key = Math.random().toString(36).substring(2);
            this.row.random_key = random_key;
            general_random_key = random_key;
        }
        // this.row.depend_key = this.form.item.depend_key;
        //si key no es nulo y es string
        //xxxxxxxxxx

        // this.row.edit = false;
        this.initForm();
        this.row.item.extra = extra;
        //this.initializeFields()

        if (this.recordItem) {
            this.row.indexi = this.recordItem.indexi
        }

        this.row.IdLoteSelected = IdLoteSelected
        this.row.document_item_id = document_item_id

        this.showMessageDetraction()

        this.$emit('add', this.row);

        if (this.search_item_by_barcode) {
            this.cleanItems()
        }
        if (has_bonus_item) {
            this.reChangeItem(bonus_items, general_random_key,this.row.quantity);
        }
        if (this.recordItem) {
            this.close();
        } else {
            this.setFocusSelectItem();
        }
    },

enter image description here