如何在 Bootstrap Vue 中向父级发送模态数据？

Question

我是 Vue 和 Bootstrap Vue 的新手。

我构建了一个 table，它使用一个 API 数据数组。此 table 有一个按钮，可在子组件中打开 <b-modal>。模式有三个字段，通过单击按钮将数据附加到 table 的数组。 table 然后更新。到此为止。

问题是：当我尝试从 <b-modal> 推送更多信息时，我之前从 <b-modal> 添加的信息在数组和 [=] 中都被修改了41=]。来自API的信息未被修改。

怎么了？非常感谢。

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);
        }
    }
})

包含 b 模态的 table 代码：

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

有两个问题：1) 我们应该在 child 组件中 never modify props，2) 添加数据时，您添加的是相同的 reference每次 child 数据。

修复 child

不是修改 prop，而是 $emit 具有克隆 child 数据的事件：

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

^{spread 运算符创建一个浅副本。}

修复 parent

现在 child 发出一个 parent 应该监听的事件。在 child 标签上创建侦听器：

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

并创建处理程序方法（在 parent 中）：

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

如何在 Bootstrap Vue 中向父级发送模态数据？

How to send modal data to parent in Bootstrap Vue?

javascript

modal-dialog

vue.js

vue-component

bootstrap-vue

修复 child

修复 parent