使用vue进行数据回显时绑定数据到bootstrap模态框导致模态框不能弹出

Question

我使用了jQuery的Ajax去后台查询了一个用户的数据，页面也接收到了该json数据。现在我使用vue将该数据单向绑定到bootstrap的修改用户的模态框中，但是这个时候该模态框不能弹出了，页面也没有报错。如果去掉绑定的: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">状态</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">关闭</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
        }
    });
     <%--修改用户时的数据回显--%>
    $(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之前进行数据回显
                        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>

Answer 1

看看你的模态框代码是不是在#app元素的外面，如果是的话，就把模态框的代码包含在要初始化成vue对象的元素里面，就可以避免这个问题了。我想原因大概是bootstrap在进行模态框初始化的时候解析属性有冲突才造成的这种问题吧。

Answer 2

一：bootstrap中要点击button出现模态框要有2个属性，一个是data-target="#id"(#id为模态框id)，另一个是data-toggle="modal",楼主代码中就缺这个属性
二、vue自带有2种与后台交互方式，一个是vue-resource，一个是axios 楼主代码中用了jquery，vue框架本身不提倡DOM操作 看看：http://www.jb51.net/article/1...
代码中有点不伦不类了

Answer 3

@男左 说的挺对的。
推荐直接使用vue-resource或者axios，
vue-resouce直接mian.js里引入，然后vue.use(vueresource);
然后就直接可以通过this.$http.post()等方法来使用了。