How to send modal data to parent in Bootstrap Vue?

Question

I'm new in Vue and Bootstrap Vue.

I built a table which uses an array of API data. This table has a button that opens a <b-modal> in a child component. The modal has three fields which append data to the table's array by clicking a button. The table then updates. Until here all right.

The problem is: when I try to push more info from <b-modal>, the info that I added before, from <b-modal>, is modified-- both in the array and in the table. The info brought from API was not modified.

What is wrong? Thanks a lot.

Vue.component('modal', {
    props:['commodity_data'],
    template:/*html*/`
        <div>            
            <b-modal id="addModal" ref="modal" hide-footer title="Add Commodity">
                <b-form-group>
                    <label>
                    Hu Count
                        <b-form-input
                            id="hu_count"
                            v-model="new_row.hu_count"
                            >
                        </b-form-input>
                    </label>
                    <label>
                    Dimensions
                        <b-form-input
                            id="dimensions"
                            v-model="new_row.dimensions"
                            >
                        </b-form-input>
                    </label>
                    <label>
                    Weight
                        <b-form-input
                            id="weight"
                            v-model="new_row.weight"
                            >
                        </b-form-input>
                    </label>
                </b-form-group>

            <b-button variant="success" @click="addRow">Add Row</b-button> 
        </b-modal>

        </div>
    `,
    data(){
        return{
            new_row:
            {
                dimensions: '',
                hu_count: '',
                weight: '',
            }
        }
    },
    methods:{
        addRow: function () {            
            this.commodity_data.push(this.new_row)
            this.$refs.modal.hide()
            console.log(this.commodity_data);
        }
    }
})

Code of the table that contains the b-modal:

Vue.component('commodity', {
    template: /*html*/`
    <div class="mx-auto commodity card">
            <div class="commodity__div-buttons">
                <div class="commodity__buttons">
                    <b-button variant="success" v-b-modal.addModal>Add Row</b-button> 
                    <b-button variant="danger" @click="deleteRows">Delete</b-button> 
                </div>
            </div>

        <b-table striped hover responsive :fields="fields" :items="commodity_data">

            <template #head(index)="data">
                <input type="checkbox" @click="selectAll" ref="checkAll">
            </template>

            <template #cell(index)="data">        
                <input type="checkbox" @click="selectRows(data.index)">
            </template> 

        </b-table>

        <modal id="addModal" :commodity_data="commodity_data"></modal>
        
    </div>
    `,
    data() {
        return {
            commodity_data: [],
            checkboxes: '',
            fields: [
                {
                    key: 'index'
                },
                {
                    key: 'hu_count',
                    label: 'Hu Count'
                },
                {
                    key: 'dimensions',
                    label: 'Dimensions'
                },
                {
                    key: 'weight',
                    label: 'Weight'
                }
            ]
        }
    },
    methods: {
        selectRows: function (e) {
            this.commodity_data[e].checked = !this.commodity_data[e].checked
        },
        deleteRows: function () {
            for (let i = 0; i < this.commodity_data.length; i++) {
                if (this.commodity_data[i].checked) {
                    this.commodity_data.splice(i, 1)
                    i--
                }
            }
            this.checkboxes.forEach(element => {
                element.checked = false
            });
        },
        selectAll: function () {
            this.commodity_data.forEach(element => {
                element.checked = !element.checked
            });

            if (this.$refs.checkAll.checked) {
                this.checkboxes.forEach(element => {
                    element.checked = true
                });
            } else {
                this.checkboxes.forEach(element => {
                    element.checked = false
                });
            }
        }
    },
    created: function () {
        let data = JSON.parse(sessionStorage.getItem('data_info'))
        this.commodity_data = data.commodity
        
    },
    mounted(){
        const table = document.querySelector('table')
        this.checkboxes = table.querySelectorAll('input')
    }
})

Answer 1

There are two problems: 1) We should never modify props in a child component, 2) When adding data, you are adding the same reference of the child data each time.

Fixing the child

Instead of modifying a prop, $emit an event with cloned child data:

addRow() {
   this.$emit('add', { ...this.new_row });  
   this.$refs.modal.hide()
}

^{The spread operator creates a shallow copy.}

Fixing the parent

Now the child emits an event that the parent should listen for. Create the listener on the child tag:

<modal id="addModal" @add="addData" :commodity_data="commodity_data"></modal>

And create the handler method (in the parent):

addData(data) {
   this.commodity_data.push(data);
}