Vue JS AJAX調用內部Modal

我試圖讓一個模式彈出一張信用卡的細節。細節來自AJAX請求。出於某種原因，根Vue實例正在更新，但組件實例不是。這是我目前有 -Vue JS AJAX調用內部Modal

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>

對於輸出，根實例都有cardid = undefined和message = the output我想要的。我的cardDetails實例的值爲cardid，但是message = undefined。

來源

2017-05-04 rbur0425

哪個版本的Vue是它？而且，$ cc變量究竟是什麼？ – Staszek

這有點令人困惑。你需要爲你的$ cc添加一個例子。在下面的評論中聲稱可以有多個$ cc - 因此我會說你沒有在任何地方循環。你確定$ cc-> card_id不是null嗎？ –

你可以試試事件

添加事件偵聽器組件：

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按鈕點擊。

來源

2017-05-07 15:25:19 sebbz

我在電話對不起，試試這個：

設置在您的卡細節
:message="message"然後在根Vue的元素中，添加一個:cardid="{{$cc->card_id}}"，不要忘記cardid丙
然後實現在根實例mounted方法，並從那裏調用getCCDetails(this.cardid)。
內getCCDetails設置message屬性

我希望這有助於

來源

2017-05-05 00:24:15 yazfield

我不想在掛載方法中運行，因爲客戶帳戶中可能有1-10個信用卡，我不想在加載頁面之前發出10個請求。我希望在點擊查看詳細信息按鈕時彈出該模式。此外，對於根Vue元素，你是否說要添加一個數據數組並返回cardid =「{{$ cc-> card_id}}」？ – rbur0425

Modal不適用於Ajax調用。您必須擁有來自控制器的Ajax調用。

來源

2017-05-13 16:07:02 user2633356

Vue JS AJAX調用內部Modal

回答

相關問題