modal ajax,在Modal中调用Vue.js AJAX

我正在尝试弹出一个信用卡详细信息的模式.详细信息来自AJAX请求.由于某种原因,根Vue实例正在更新,但组件实例不是.这就是我目前所拥有的 -

HTML:

×

View Card Details

Close

Vue JS:

Vue.component('card-details', {

template: '

@{{message}}

',

// 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));

}

}

})

对于输出,Root实例已经cardid = undefined和message = the output我想要了.我的cardDetails实例的cardid值正确但是message = undefined.