Question

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

即在我的new fullpage('#fullpage', { sectionsColor: ['yellow', 'green', 'purple', 'orange'], navigation: true, onLeave: function(origin, destination, direction) { //assuming section 2 is the one with scrollOverflow fullpage_api.setAllowScrolling(destination.index !== 1); } });中：

methods

这是组件的HTML部分：

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();         
}

在我的<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" width="100%"> <thead> <tr> <th>Name</th> <th>Description</th> <th>Action</th> </tr> </thead> </table>函数中，当填充数据表时，我会附加一个Edit锚标记，并在其中传递方法displayUserTypes。单击此编辑链接应触发如下所示的模式：

在我的方法中：

editModal

但是模态不是从addModal(){ $('#userRolesModal').modal('show'); }, editModal(){ $('#userRolesModal').modal('show'); },函数中触发的。我已经确认模态运行良好，因为我的添加按钮调用editModal函数会触发模态。所以我的想法是，因为我从动态创建的链接中调用addModal函数，所以可能还有一些需要传递给我的代码以触发此方法的东西？

Answer 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

Answer 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>";
...

我不知道这是否是一个好的解决方案，但是它可以工作。

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

2 个答案: