分页时bootstraptable和Vue放在一起使用时出现按钮失效的解决办法

//boostraptable的代码 

function select(){

var id=$("#id").val();
var name=$("#name").val();
$('#LogData').bootstrapTable('destroy');
$("#LogData").bootstrapTable({
url:  "${Config.baseURL}/commons-import/component/excel/template/type/page",
method:"get",
  toolbar:'#productToolBar',
    pagination : true, // 分页  
    striped: true, //间隔换色
    cache: false,  
    striped: true,  //表格显示条纹  
    silent: true, //刷新事件必须设置
    pageSize: 10,  //每页显示的记录数  
    pageNumber:1, //初始化加载第一页
    search: false,  //是否启用查询  
    showColumns: false,  //显示下拉框勾选要显示的列  
    showRefresh: false,  //显示刷新按钮  
    clickToSelect: true, //点击行就选中
    showToggle: false,
    showColumns: false,  //显示隐藏列
    showRefresh: false,  //显示刷新按钮
    singleSelect: true, //复选框只能选择一条记录
  sidePagination: 'server', //server没有与数据库交互,所以使用客户端分页
  dataField :'data', //返回的数据
  clickToSelect: true,    //是否启用点击选中行
  pageList: [3,5,7,11],
  /* showExport: true,                     //是否显示导出
  exportDataType: "basic",  */
    //设置分页自定义参数,服务端返回数据必须要含有total和rows两个,客户端分页返回数据必须要有data节点
queryParams: function(params) {
var param = {   
  pageIndex: this.pageNumber-1,    
                  pageSize: params.limit,
                  id: id,
                  name: name
              }; 
          return param;  
            }, 
      columns: [
        {field:"id",align:"center", valign: 'middle',width:"5%",title:"模块类型编号"},
{field:"typeName",align:"center",valign: 'middle',width:"5%",title:"模块类型名称"},
{field:"create_user",align:"center",valign:'middle',width:"5%",title:"创建人姓名"},
{field:"create_time",align:"center",valign:'middle',width:"5%",title:"创建日期"},
{field:"grade",align:"center",valign:'middle',width:"5%",title:"操作",
formatter:function(value,row,index){
return[
                        '<button οnclick="removeType(\''+row.id+'\')" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-trash"></span> 删除</button>',
                        '<button οnclick="toedit(\''+row.id+'\')" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-plus-sign"></span> 编辑</button>',        
  ].join('');
}
}
      ]
});

     }

Vue的代码：

var vm = new Vue({
    el: 'body',
    data:function() {
      return {
        data:{
        id : '',
        types:'',
total:'',
typeName:'',
msg: ''
          },
      }                            
    },
    methods: {
      removeType:function(id){
    alert("aaa");
$.messager.confirm('确认','您确认想要删除记录吗？',function(flag){    
if(flag){
$.ajax({
//跳转到ImportTemplateTypeController下的方法
url : basePath + "commons-import/component/excel/template/type/" + id,
type : 'delete',
success : function(data) {
getTypes();
},
error : function(jqXHR, textStatus, errorThrown) {
$.alert("error","删除失败！");
}
});
}
});
},  
toedit1: function(id){
alert("aa");
this.$refs.dialogedit.show = true
vm.onshowedit(id);
}, 

本来我想点击Bootstraptable中的编辑按钮的，但是发现页面没有反应。

于是想到方法调用方法的机制。这里最重要的一点是   vue的方法用vm来圈住，感谢某篇博客解决了困扰了我调用不了的问题。

 function toedit(id){
    /*  document.getElementById("target").click(); */
    vm.toedit1(id);
}