我正在尝试弹出一个信用卡详细信息的模式。详细信息来自AJAX请求。由于某种原因,根Vue实例正在更新,但组件实例不是。这就是我目前所拥有的 -
HTML:
<!-- View Card Details Modal -->
<!-- Modal -->
<div class="modal fade" id="ccdetails" 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" id="myModalLabel">View Card Details</h4>
</div>
<card-details cardid="{{$cc->card_id}}" :message="getCCDetails('{{$cc->card_id}}')"></card-details>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
JS视图:
<script type="text/javascript">
Vue.component('card-details', {
template: '<div class="modal-body">@{{message}}</div>',
// data is technically a function, so Vue won't
// complain, but we return the same object
// reference for each component instance
props: ['message', 'cardid']
}),
new Vue({
el: '#ccdetails',
data: {
cardid: '',
message: ''
},
methods: {
getCCDetails: function (id) {
console.log(id)
console.log('calling function')
axios.get('/card/'.concat(id))
.then(function (response) {
this.message = JSON.stringify(response.data)
}.bind(this))
.catch(function (error) {
return this.message = 'Sorry there was an error'
}.bind(this));
}
}
})
</script>
对于输出,Root实例有我想要的cardid = undefined
和message = the output
。我的cardDetails实例的cardid
值正确,但message = undefined
。
你可以试试活动
在组件中添加事件侦听器:
Vue.component('card-details', {
template: '<div class="modal-body">@{{message}}</div>',
// data is technically a function, so Vue won't
// complain, but we return the same object
// reference for each component instance
props: ['cardid'],
data: {
message: ''
},
mounted() {
this.$parent.$on("card-details:message", message => {
this.message = message;
});
},
}),
在函数中添加发射线:
getCCDetails: function (id) {
console.log(id)
console.log('calling function')
axios.get('/card/'.concat(id))
.then(function (response) {
this.message = JSON.stringify(response.data)
this.$emit('card-details:message', this.message) // <--
}.bind(this))
.catch(function (error) {
return this.message = 'Sorry there was an error'
}.bind(this));
}
并且只在getCCDetails
按钮上单击才能调用View Details
函数。
我在电话中抱歉,试试这个:
:message="message"
:cardid="{{$cc->card_id}}"
,不要忘记cardid
道具mounted
方法并从那里调用getCCDetails(this.cardid)
。getCCDetails
内设置message
财产我希望这有帮助
Modal不适用于Ajax调用。您必须从控制器进行Ajax调用。