我正在尝试在 b-table 中获取 v-html 的事件
“选项” session 是用 v-html 插入的
<b-table striped hover :items="clusters" :fields="fields" :borderless="true" :busy="statusRequest">
<template v-slot:cell(id)="data">
<div v-html="table_option_html"></div>
</template>
<template v-slot:table-busy>
<div class="text-center text-secondary my-2">
<b-spinner class="align-middle"></b-spinner>
<strong> Loading...</strong>
</div>
</template>
</b-table>
在上面的代码中,我在这里插入了 html
<template v-slot:cell(id)="data">
<div v-html="table_option_html"></div>
</template>
这是table_option_html的值
table_option_html: `
<button class="btn btn-secondary" title="Excluir" @click="action("aaa")"><i class="fa fa-trash"></i></button>
<button class="btn btn-secondary" title="Testar"><i class="fa fa-play-circle"></i></button>
<button class="btn btn-secondary" title="Editar"><i class="fa fa-edit"></i></button>
`
@click 事件无法调用操作
methods: {
action: function(event) {
console.log(event);
}
}
最佳答案
v-html
不适用于呈现组件或 vue 特殊属性(如 @event
处理程序、v-model
等)。
最好的办法是在插槽中渲染按钮并将@click 事件附加到按钮(这样 Vue 就可以控制 DOM 处理程序),而不是通过 v-html
.
另一种选择是在 <div>
上进行事件委托(delegate)(即 <div @click="handler($evtent)">
,并检查 event.target
以查看是否单击了按钮(或按钮内部)以及单击了哪个按钮。
handler(evt) {
if(evt.target) {
const button = evt.target.closest('button')
if (button) {
const title = button.getAttrubute('title')
// do something based on what title the button has
}
}
}
关于twitter-bootstrap - 使用事件单击在 bootstrap-vue 的 b-table 上显示原始 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59362771/