Question

我正在尝试弹出一个信用卡详细信息的模式。详细信息来自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">&times;</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>

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>

对于输出，Root实例有cardid = undefined和message = the output我想要的。我的cardDetails实例的cardid值正确但message = undefined。

Answer 1

您可以尝试活动

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

getCCDetails

在函数中添加emit行：

View Details

仅在f(x,y) = 1, if 2 <= x <= 3 and y = 1, f(x,y) = 0, otherwise 按钮点击时进行f @(x,y) 1.*((x >= 2) && (x <= 3) & (y == 1));功能调用。

Answer 2

我在电话中抱歉，试试这个：

在卡片详情

:message="message"

然后在根Vue元素中添加:cardid="{{$cc->card_id}}"，不要忘记cardid prop
然后在根实例中实现mounted方法并从那里调用getCCDetails(this.cardid)。
在getCCDetails内设置message属性

我希望这会有所帮助

Answer 3

模态不适用于Ajax调用。您必须从控制器进行Ajax调用。

在Modal中调用Vue.js AJAX

3 个答案: