Twitter bootstrap Vue.js AJAX调用内部模式

我正试图有一个模式弹出与信用卡的详细信息。详细信息来自一个AJAX请求。由于某些原因，根Vue实例正在更新，但组件实例未更新。这就是我目前拥有的-

HTML:

&时代；
查看卡的详细信息
接近

Vue 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>

Vue.组件（“卡片详细信息”{
模板：“@{{message}}”，
//数据在技术上是一个函数，因此Vue不会
//抱怨，但我们返回相同的对象
//每个组件实例的引用
道具：['message'，'cardd']
}),
新Vue({
el:'详细信息'，
数据：{
卡迪德：“，
消息：“”
},
方法：{
getCCDetails:函数（id）{
控制台日志（id）
console.log（'调用函数'）
axios.get（'/card/'.concat（id））
.然后（功能（响应）{
this.message=JSON.stringify（response.data）
}.绑定（本）
.catch（函数（错误）{
返回此消息。消息='抱歉，出现错误'
}.约束（这个）；
}
}
})

---

对于输出，根实例具有

cardid=undefined

和

message=我想要的输出。My cardDetails实例的
cardid
值正确，但
message=undefined
 我在打电话抱歉，试试这个：


在您的卡详细信息中设置
：message=“message”

然后在根Vue元素中，添加一个
：cardd=“{{{$cc->card\u id}}”
，不要忘记
cardd
prop

然后在根实例中实现
mounted
方法，并从那里调用
getCCDetails（this.carid）

内部
getCCDetails
set
message
property


我希望这对您有所帮助
您可以尝试以下活动

在组件中添加事件侦听器：

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;
            });
        },
    }),

Vue.component（'card-details'{
模板：“@{{message}}”，
//数据在技术上是一个函数，因此Vue不会
//抱怨，但我们返回相同的对象
//每个组件实例的引用
道具：['cardd']，
数据：{
消息：“”
},
安装的（）{
此.$parent.$on（“卡详细信息：消息”，消息=>{
this.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:函数（id）{
控制台日志（id）
console.log（'调用函数'）
axios.get（'/card/'.concat（id））
.然后（功能（响应）{
this.message=JSON.stringify（response.data）
此.emit（'card-details:message'，this.message）/模式不适用于Ajax调用。
您必须有来自控制器的Ajax调用。
我不想在mounted方法中运行，因为客户的帐户上可以有1-10张信用卡，我不想在页面加载之前发出10个请求。我希望在他们单击View Details（查看详细信息）按钮并弹出模式时发出请求。此外，对于根Vue元素，是y你说要添加一个数据数组并返回cardd=“{{$cc->card_id}”？它是哪个版本的Vue？还有，$cc变量到底是什么？这有点让人困惑。你需要为你的$cc添加一个示例。在下面的评论中，你声称可以有多个$cc-因此我想说你没有在任何地方循环。你确保$cc->card_id不为空吗？
    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));

    }