在带有事件单击的bootstrap-vue的b表上显示原始HTML

Question

我正在尝试在b表中获取v-html事件

“ 选项”会话已通过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不适用于渲染组件或提供特殊属性（例如@event处理程序，v-model等）。

您最好的选择是渲染插槽中的按钮，并将@click事件附加到按钮上（通过这种方式，Vue可以控制DOM处理程序），而不是通过v-html。

另一个选择是在<div>（即<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
    }
  }
}