javascript - 如何在 Bootstrap Vue 中向父级发送模态数据?
问题描述
我是 Vue 和 Bootstrap Vue 的新手。
我建立了一个使用 API 数据数组的表。<b-modal>
此表有一个按钮,可在子组件中打开一个。该模式具有三个字段,它们通过单击按钮将数据附加到表的数组中。然后表更新。到这里还好。
问题是:当我尝试从 推送更多信息时<b-modal>
,我之前添加的信息 from<b-modal>
被修改了——无论是在数组中还是在表中。从 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-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')
}
})
解决方案
有两个问题:1)我们不应该修改子组件中的道具,2)添加数据时,每次添加的子数据都是相同的引用。
固定孩子
而不是修改一个道具,$emit
一个带有克隆子数据的事件:
addRow() {
this.$emit('add', { ...this.new_row });
this.$refs.modal.hide()
}
扩展运算符创建一个浅拷贝。
修复父级
现在孩子发出一个父母应该监听的事件。在子标签上创建监听器:
<modal id="addModal" @add="addData" :commodity_data="commodity_data"></modal>
并创建处理程序方法(在父级中):
addData(data) {
this.commodity_data.push(data);
}
推荐阅读
- javascript - 静态方法的用例
- laravel - Laravel nova - 如何从 BelongsTo 关系中删除所需的验证?
- javascript - React 调用无状态组件
- tabulator - 如何将 ID 提供给嵌套的制表符
- scala - Scala 类型成员不编译
- reactjs - ReactJS + Redux 编辑表单
- javascript - 以不同方式检查虚假/真实值有什么区别?
- sylius - 我想从 Sylius 导航栏中的购物车中删除单词“item/items”
- keras - 用 Keras 中的神经网络给定参数的近似简单函数
- c# - 进度条和 backgroundWorker 的协助