我从axios中获取了一些数据，并将其传递到Bootstrap表中，在声明nameOfPerson字段的computed属性中，我创建了一个click事件，这样当用户单击名称时，就会打开一个modal，该modal也包含表中显示的数据。
然而，我想改变它，这样当你点击一个人的名字时，只有那个人的数据被传递到模态。所以，不是传递一个包含所有用户数据的属性到模态，我只想要与我实际点击的名字相关的数据。
我该怎么做呢？
家长：
<template>
<b-container>
<b-card class="mt-4">
<b-table
:items="dataItems"
:fields="fields"
:per-page="[5, 10]"
sort-desc
primary-key="id"
/>
</b-card>
<data-modal ref="dataModal" :selected-name="dataItems"/>
</b-container>
</template>
<script>
import {axiosComponent} from '@/axios/services';
import DataModal from '@/components/DataModal';
export default {
components: {
DataModal
},
data() {
return {
dataItems: null,
};
},
computed: {
fields() {
return [
{
key: 'nameOfperson',
label: 'name',
sortable: true
click: () => this.$refs.dataModal.show(),
},
{
key: 'ageOfPerson',
label: 'Age',
sortable: true
},
]
},
},
methods: {
load(){
axiosComponent.getData().then(result => {
this.dataItems = result.data
})
}
},
created() {
this.load()
}
};
</script>孩子（模态）
<template>
<b-modal v-model="showModal">
<div v-for="log in selectedName">
{{ log }}
</div>
</b-modal>
</template>
<script>
export default {
props: {
selectedName: Array
},
data() {
return {
showModal: false,
};
},
methods: {
show(){
this.showModal = true
}
}
};
</script>
1条答案
按热度按时间sh7euo9m1#
您可以使用
@row-selected方法，看看下面的演示：