[英]BootstrapVue access b-table row data in slot template
I have a delete button on each row and I need to get log_id
from items to pass to function deleteLog
.我在每一行都有一个删除按钮,我需要从项目中获取
log_id
以传递给 function deleteLog
。 That function always alerts log_id
is undefined
. function 总是提醒
log_id
is undefined
。
How can I pass log_id
to the function deleteLog
without undefined
?如何在没有
undefined
的情况下将log_id
传递给 function deleteLog
?
<template>
<b-table striped hover :items="items" :fields="fields">
<template v-slot:cell(Delete)>
<b-button variant="danger" v-on:click="deleteLog(log_id)">Delete</b-button>
</template>
</b-table>
</template>
<script>
export default {
data() {
return {
fields: ['Year', 'Month', 'Round', 'Name', 'Delete', 'log_id'],
items: []
}
}
}
</script>
You can access the row data and its log_id
through the slot data:您可以通过槽数据访问行数据及其
log_id
:
<b-table striped hover :items="items" :fields="fields">
<template v-slot:cell(Delete)="data"> <!-- `data` -->
<b-button variant="danger" v-on:click="deleteLog(data.item.log_id)">Delete</b-button>
</template>
</b-table>
Here's another syntax, destructuring the slot data:这是另一种语法, 解构插槽数据:
<b-table striped hover :items="items" :fields="fields">
<template v-slot:cell(Delete)="{ item }"> <!-- `item` -->
<b-button variant="danger" v-on:click="deleteLog(item.log_id)">Delete</b-button>
</template>
</b-table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.