极客观点
研发管理
HarmonyOS
我使用了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">×</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>
看看你的模态框代码是不是在#app元素的外面，如果是的话，就把模态框的代码包含在要初始化成vue对象的元素里面，就可以避免这个问题了。我想原因大概是bootstrap在进行模态框初始化的时候解析属性有冲突才造成的这种问题吧。