使用vue進行數(shù)據(jù)回顯時綁定數(shù)據(jù)到bootstrap模態(tài)框?qū)е履B(tài)框不能彈出

我使用了jQuery的Ajax去后臺查詢了一個用戶的數(shù)據(jù)，頁面也接收到了該json數(shù)據(jù)。現(xiàn)在我使用vue將該數(shù)據(jù)單向綁定到bootstrap的修改用戶的模態(tài)框中，但是這個時候該模態(tài)框不能彈出了，頁面也沒有報錯。如果去掉綁定的:value="{{xxx}}"這個東西可以彈出(全部使用jQuery操作也是可以的)。這是為什么啊？本人剛開始使用vue，這樣是不對還是其它什么原因？求高人指點。

這是代碼：
html：

<button class="btn btn-warning btn-xs" data-id="${user.id }" data-target="#updateUser"><i class="glyphicon glyphicon-edit"></i> 修改</button>

<div id="update">
    <form class="form-horizontal" action="userAction!update" method="post">
        <div class="modal fade" id="updateUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">更新用戶</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label col-md-2">用戶名</label>
                            <div class="col-md-8">
                                <input class="form-control" placeholder="用戶名" name="user.username"
                                       :value="{{username}}">
                                <input type="hidden" name="id">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">密碼</label>
                            <div class="col-md-8">
                                <input class="form-control" type="password" placeholder="密碼"
                                       name="user.password" :value="{{password}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">年齡</label>
                            <div class="col-md-8">
                                <input class="form-control" placeholder="年齡" name="user.age" :value="{{age}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">狀態(tài)</label>
                            <div class="col-md-8">
                                <label class="radio-inline"> <input type="radio"
                                                                    name="user.enabled" value="true"
                                                                    :checked="{{enabled=1?'checked':''}}"> 啟用
                                </label> <label class="radio-inline"> <input type="radio"
                                                                             name="user.enabled" value="false"
                                                                             :checked="{{enabled=0?'checked':''}}">
                                禁用
                            </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">郵箱</label>
                            <div class="col-md-8">
                                <input class="form-control" name="user.email" placeholder="郵箱" :value="{{email}}">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
                        <button type="submit" class="btn btn-primary">修改</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

JS:

<script type="text/javascript">
    //    全選反選
    var vm = new Vue({
        el: '#app',
        data: {
            checkAll: false
        }
    });
     <%--修改用戶時的數(shù)據(jù)回顯--%>
    $(function () {
        $("[data-id]").click(function () {
            var id = $(this).data('id');
            var target = $(this).data("target");
            $.ajax({
                url: 'userAction!queryOne',
                data: {
                    'user.id': id
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    var echoData = new Vue({
                        el: '#update',
                        data: {
                            id: data.id,
                            username: data.username,
                            password: data.password,
                            email: data.email,
                            age: data.age,
                            enabled: data.enabled
                        }
                    });
                    $(target).modal('show');
                    console.log(echoData.$data);
                    /*$(target).on('shown.bs.modal', function () {
//                        彈出modal之前進行數(shù)據(jù)回顯
                        var $input = $("div#updateUser :input[name='user." + key + "']");
                        for (key in data) {
                            if (key == 'enabled') {
                                if (data[key] == 1)
                                    $($input[0]).prop('checked', true);
                                else
                                    $($input[1]).prop('checked', true);
                            }
                            $input.val(data[key]);
                        }
                    })*/
                }
            })
        });
        //刪除選中
        $("[data-function]").click(function () {
            var ids = [];
            $("tbody :checkbox:checked").each(function () {
                ids.push($(this).val())
            });
            var params = $.param({'ids': ids}, true);
            $.ajax({
                url: 'userAction!deleteAll',
                data: params,
                success: function (data) {
                    if (data == "success")
                        window.location.href = 'userAction!queryAll'
                }
            })
        })
    })
</script>