首先在template中添加请求按钮
<div v-for="item in *****s" :key="1000 + item.id">
<button class="blah" @click="sendRequest(item.id)">详情请求</button>
</div>
然后向后端发送一个ajax请求
sendRequest(id) {
let self = this
window.$.ajax({
url: 'http://' ******************,
type: 'GET',
dataType: 'json',
data: {'id': id},
success: function(tmp) {
self.describeInfo = tmp //将数据放到公共区域
// let tmpMsg = {
// tmpString: '这个型号用来识别一些东西'
// }
console.log(tmp)
window.$('#modal-get').modal('show') //显示模态框 modal-get是模态框的id
window.$('#something').val(tmpMsg.tmpString) //something是一个text文本框的id要将数
据展示在text里面
}
})
}
template中编写一个模态框
<div class="modal fade" id="modal-get" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">这是一个模态框</h4>
</div>
<div class="modal-body">
<input type="text" class="showtext" id="something" v-model="describeInfo.describe">//v-model双向绑定一下
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm" data-dismiss="modal" @click="updateData()">修改</button>
<button type="button" class="btn btn-sm" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
在script中写一个post请求上传你修改的东西
updateData() {
var self = this
window.$.ajax({
url: 'http://'**********,
type: 'post',
dataType: 'json',
data: {
id: self.****Info.id,
describe: self.****Info.describe
}
})
}
不能直接拿到的数据在可拿到的地方放入公共区域