twitter-bootstrap - 使用事件单击在 bootstrap-vue 的 b-table 上显示原始 HTML

Question

我正在尝试在 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);
    }
  }

Answer 1

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