Vue.js 在vue引导数据表中添加事件

我现在从vue开始，并在表中发现以下困难：

我将Vue引导数据表与以下代码一起使用

  <mdb-datatable
     :data="'http://localhost/category/list_category'"
     striped
     bordered
     responsive
     lengthChange = "false"
     :tfoot="false"
     arrows
     reactive
     :time="3000"
   />

方法返回一个有效的json来填充表。一切都很完美

如您所见，我使用两个列，其中一个是名称，另一个是删除和编辑操作。生成行数组的代码如下所示：

我用的是codeigniter

$this->db->select（“*”）；
$this->db->from（“mycategory”）；
$query=$this->db->get（）；
$ar=array（）；
如果（$query->num\u rows（）>0）{
foreach（$query->result（）作为$row）{
$ar[]=数组(
'name'=>$row->name，
“acciones'=>”
"
);
}
返回$ar；
}

---

我正在将单击事件添加到标记中，这些标记是我在表中的操作，问题是在使用数据呈现表后，vue不会“看到”单击事件。有人知道我想做的事在任何方面都是可能的吗

在mdb datatable标记中添加此属性

：翻译=”{
countLabel:'选定行'，
添加：“添加”，
编辑：“编辑”，
删除：“删除”，
选择标签：“显示条目”，
searchLabel:“搜索”，
上一篇：'上一篇'，
下一个：'下一个'，
addFormLabel:“添加新表单”，
addFormBtn:“添加表单”，
editFormLabel:“编辑表单”，
editFormBtn:“编辑表单”，
deleteFormLabel:“删除”，
deleteFormText:“确实要删除所选行吗？”，
deleteFormYes:'是'，
deleteFormNo:'否'
}“

在mdb数据表标记中添加此属性

：翻译=”{
countLabel:'选定行'，
添加：“添加”，
编辑：“编辑”，
删除：“删除”，
选择标签：“显示条目”，
searchLabel:“搜索”，
上一篇：'上一篇'，
下一个：'下一个'，
addFormLabel:“添加新表单”，
addFormBtn:“添加表单”，
editFormLabel:“编辑表单”，
editFormBtn:“编辑表单”，
deleteFormLabel:“删除”，
deleteFormText:“确实要删除所选行吗？”，
deleteFormYes:'是'，
deleteFormNo:'否'
}“

我遇到过类似的问题，Vue设置事件侦听器时要针对的元素，因此它们不会在需要时触发。

mdb datatable

（或代码的另一部分）是否有在生成表时触发的事件？在创建所有元素之后，您可以连接到该事件并设置事件侦听器。好主意@ebbishop。。。我认为它可以工作。。。我会用那种方式测试它。谢谢我遇到过类似的问题，在Vue设置事件监听器时要针对的元素，因此它们不会在您需要时触发。

mdb datatable

（或代码的另一部分）是否有在生成表时触发的事件？在创建所有元素之后，您可以连接到该事件并设置事件侦听器。好主意@ebbishop。。。我认为它可以工作。。。我会用那种方式测试它。谢谢我添加了属性，但什么也没有发生：（你能解释一下它的作用吗？我添加了属性，但什么也没有发生：（你能解释一下它的作用吗？

        $this->db->select("*");
        $this->db->from("mycategory");
        $query = $this->db->get();
        $ar = array();
        if($query->num_rows() > 0){
            foreach($query->result() as $row){
                $ar[] = array(
                    'name' => $row->name,
                    'acciones' => "
                        <a @click.prevent='delete' data-toggle='tooltip' data-placement='top' title='Borrar'><i class='dripicons-trash text-danger'></i></a>
                        &nbsp;&nbsp; 
                        <a @click.prevent='edit' data-toggle='tooltip' data-placement='top' title='Editar' ><i class=' dripicons-document-edit text-success'></i></a>"
                );
            }
            return $ar;
        }