VueJs - 调用传递给动态创建的 DOM 元素的方法

Posted 2023-02-22

【中文标题】VueJs - 调用传递给动态创建的 DOM 元素的方法

【英文标题】：VueJs - Calling methods passed to dynamically created DOM elements

【发布时间】：2019-09-19 00:19:18

【问题描述】：

在我的 Vuejs 组件中，我正在动态填充数据表

即在我的methods：

displayUserTypes()
   axios.get('/antenna-monitor/pull-user-types').then( (data) => 
   
      for(var i in data)
      
          $('#user-roles').dataTable().fnAddData( [
              data[i].name,
              data[i].description,
              '<a href="#" title="Edit" @click.prevent="editModal"><i class="fa fa-edit"></i></a> | <a href="#" title="Delete"><i class="fa fa-trash"></i></a>'
           ]);
      

,
created() 
        this.displayUserTypes();         

这是组件的 html 部分：

<button class="btn btn-success" @click="addModal"><i class="fa fa-plus"></i>Add New</button>                     
<table id="user-roles" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" >
       <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Action</th>
            </tr>
       </thead>
 </table>

请注意，在我的displayUserTypes 函数中，当填充数据表时，我会附加一个编辑锚标记并在其中传递editModal 方法。单击此编辑链接应触发一个模式，如下所示：

在我的方法中：

addModal()
       $('#userRolesModal').modal('show');
,

editModal()
       $('#userRolesModal').modal('show');                
,

但是editModal 函数没有触发模态。我已经确认模态运行良好，因为我添加调用addModal 函数的按钮会触发模态。所以我的想法是，因为我从动态创建的链接中调用了editModal 函数，所以我可能需要将一些额外的东西传递给我的代码来触发这个方法？

【问题讨论】：

你好，是组件中的方法，还是父vue中的方法？

嗨@LoïcMonard。它们在组件中

【参考方案1】：

您正在使用数据表动态附加 html，vue 不会监听动态 DOM 操作。因此，您定义的方法不适用于新插入的 HTML。

实现您想要的一种方法是使用方法 editModal 创建一个新的 Vue 实例，并在渲染完成后将其挂载到桌子上。

displayUserTypes() 
  axios.get('/antenna-monitor/pull-user-types').then(( data ) => 
    for (var i in data) 
      $('#user-roles').dataTable().fnAddData([
        data[i].name,
        data[i].description,
        '<a href="#" title="Edit" @click.prevent="editModal"><i class="fa fa-edit"></i></a> | <a href="#" title="Delete"><i class="fa fa-trash"></i></a>'
      ]);
    

    new Vue(
     methods: 
        editModal() 
          $('#userRolesModal').modal('show');
        
     
    ).$mount('#user-roles')
  );

如果你想在不创建新的 vue 实例的情况下实现这一点，请参考下面如何重新挂载 vue 组件

How to re-mount a component?

Force updating vue component

【讨论】：

感谢您的意见。与创建新的 Vue 实例选项一起使用。将深入研究其他选项。所以本质上，对于解决方案，创建一个新的 Vue 实例是否会让 Vue 在发生 DOM 操作时监听它？这个选项有什么缺点吗？

不，它不会让 vue 监听 DOM 操作，每当你说用这个 vue 实例挂载这个 DOM 元素时，vue 会在元素内搜索 vue 指令并评估它们，这是一次性操作。所以我们在这里所做的本质上是动态插入包含 vue 指令的 HTML 并要求 vue 评估这些指令。新实例只是为了强制 vue 重新评估。

【参考方案2】：

为您的 VueJS 对象命名：

var MyObj = new Vue(
    ...
    methods: 
        call_me() 
            alert('Here I am!');
        ,
    
);

在您的dynamic HTML 中，您可以生成以下内容：

...
var link = "<a href='#' onclick='javascript:MyObj.call_me()'>Click me!</a>";
...

我不知道这是否是一个好的解决方案，但它确实有效。