vue框架+bootstrap-table框架+jq一起用时出现问题

所有的按钮点击事件失效。如果我将第143行注释掉，则所有点击事件有效。这几天查了好多资料百思不得其解，求助各位大神。我想使用bootstrap-table的功能并保持表格完整性，又想使按钮点击事件有效，请问应该怎么处理？代码如下：<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>VUE demo</title>
    <link rel="stylesheet" href="css/bootstrap-table.css"/>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <script src="js/jquery1.11.3.min.js"></script>
    <style>
        /* Ripple Out */
        @-webkit-keyframes hvr-ripple-out {
            100% {
                top: -12px;
                right: -12px;
                bottom: -12px;
                left: -12px;
                opacity: 0;
            }
        }        @keyframes hvr-ripple-out {
            100% {
                top: -12px;
                right: -12px;
                bottom: -12px;
                left: -12px;
                opacity: 0;
            }
        }        .hvr-ripple-out {
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            background: #a0cce5;
        }
        .hvr-ripple-out:before {
            content: '';
            position: absolute;
            border: #a0cce5 solid 6px;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .hvr-ripple-out:hover:before,.hvr-ripple-out:focus:before,.hvr-ripple-out:active:before {
            -webkit-animation-name: hvr-ripple-out;
            animation-name: hvr-ripple-out;
        }
        .tab{
            display:table;
        }
        .tab th,.tab td{
            display: table-cell;
            vertical-align: middle;
        }
        .tab,.tab th{
            text-align: center;        }        .container{
            margin-top: 50px;
            border:1px solid grey;
        }
        /* Border Fade */
        .hvr-border-fade {
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            -webkit-transition-property: box-shadow;
            background:#a7a7a7;
            transition-property: box-shadow;
            box-shadow: inset 0 0 0 4px #a7a7a7;, 0 0 1px rgba(0, 0, 0, 0);
            /* Hack to improve aliasing on mobile/tablet devices */
        }
        .hvr-border-fade:hover,.hvr-border-fade:focus,.hvr-border-fade:active {
            box-shadow: inset 0 0 0 4px #d1ecfb, 0 0 1px rgba(0, 0, 0, 0);
            /* Hack to improve aliasing on mobile/tablet devices */
        }
    </style>
</head>
<body>
<div id="app">
    <!--demo-->
    <div class="container">
        <div class="row">
            <div class="col-md-12">&nbsp;</div>
        </div>    <div class="row">
    <div class="col-md-3">
        <legend>
            添加人员
        </legend>
        <div class="form-group">
            <label>姓名：</label>
            <input type="text" v-model="newData.name"/>
        </div>
        <div class="form-group">
            <label>年龄：</label>
            <input type="text" v-model="newData.age"/>
        </div>
        <div class="form-group">
            <label>性别：</label>
            <select v-model="newData.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-3">
                <div class="form-group">
                    <button class="hvr-ripple-out btn" v-on:click="Create">添加</button>
                </div>
            </div>
        </div>    </div>
    <div class="col-md-6 ttab">
    <table id="tab">
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="data in data4">
            <td>{{data.name}}</td>
            <td>{{data.age}}</td>
            <td>{{data.sex}}</td>
            <td v-bind:class="text-center">
                <button class="hvr-border-fade btn" v-on:click="DeleteP($index)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
    </div>
    <div class="col-md-3"></div>
        <div class="row">
            <div class="col-md-12">&nbsp;</div>
        </div>
    </div>
    </div>
 </div>
<script src="js/bootstrap-table.js"></script>
<script src="js/vue.min.js"></script>
<script>//demo
var demo = new Vue({
    el:'body',
    data:{
        data4:[{name: '王洋', age: 30, sex: '男'},{name: '张博', age: 20, sex: '女'},{name: '王洋', age: 30, sex: '男'}],
        newData:{name:'',age:0,sex:'男'}
    },
    methods:{
        Create:function(){
            this.data4.push(this.newData);
            this.newData={name:'',age:'',sex:''};
        },
        DeleteP:function(index){
            this.data4.splice(index,1)
        }    }
})</script>
<script type="text/javascript">
    $(function(){
        $(".hvr-border-fade").bind("click",function(){
         $(td).remove();
        });
    });
</script>
<script>
    $(function(){
        $('#tab').bootstrapTable({
            striped: true,//是否启用隔色
            search: true//是否启用搜索
        })    })
</script>
</body>
</html>个人认为vue在数据双向绑定和遍历输出做得十分优秀，而bootstrap-table的表格美化及搜索排序等功能也十分强大。所以想将二者结合使用。在这个案例中，如果我将143行注释掉，则所有按钮的点击事件有效，反之则不响应。不知道是为什么，求助各位大神！万分感谢！

解决方案 »

  1.   

    style部分是对按钮样式的修饰
      

  2.   

    不能这么写，用js来实例化bootstrap
                    $("#meterialInfo").myBpTable({
                        url: 'FoodInMaterial_Json',
                        method: 'post',
                        toolbar: '#toolbar',
                        queryParams: function (param) {
                            return {
                                fId:$("#fId").val(),
                            }
                        },//传递参数（*）
                        pagination: false,
                        clickToSelect: false,
                        detailView: true,//父子表
                        columns: [{
                            checkbox: true
                        }, {
                            field: 'mName',
                            title: "原料名",
                        }, {
                            //field: 'operate',
                            title: '操作',
                            align: 'center',
                            events: operateEvents,
                            formatter: operateFormatter,
                            width: "35%"
                        }],
                        //注册加载子表的事件。注意下这里的三个参数！
                        onExpandRow: function (index, row, $detail) {
                            tableInit.InitSubTable(index, row, $detail);
                        }
                    });
      

  3.   

    myBpTable  是我封装的bootstrap-table方法
      

  4.   

    events: operateEvents,
     formatter: operateFormatter,
      

  5.   

    你删除143行： <th>删除</th>
    也要删除下面的151行：<td v-bind:class="text-center">
                    <button class="hvr-border-fade btn" v-on:click="DeleteP($index)">删除</button>
                </td>