VUE JS - Ajax響應我已填充

Question

see the attachement

記錄後列的變化按鈕並具有下在具有v-on:click="unfollow(dynamic_value)"

我想更改按鈕後，「按照」每行按鈕點擊和成功的阿賈克斯響應像

我不知道如何做到這一點在vue。

任何幫助表示讚賞。

Answer 1

我建議你對你的記錄創建一個組件（參見https://vuejs.org/v2/guide/components.html）

你可以用一個叫布爾每條記錄創建一個組件，在組件的數據以及對V-開「緊接着」 ：單擊指令編寫一個三元條件，其中兩個方法都會進行ajax調用，並且在成功回調時會改變布爾的狀態。

Vue.component('follow-btn', { 
    template: '#follow-btn-template', 
    data: function() { 
    return { 
     followed: false 
    } 
    }, 
    methods: { 
    follow: function (dynamic_value) { 
     // Ajax call and on success => change this.followed to true 
    }, 
    unfollow: function (dynamic_value) { 
     // Ajax call and on success => change this.followed to false 
    } 
    } 
}) 

：

<script id='follow-btn-template' type="text/x-template"> 
    <button v-on:click="followed ? unfollow(dynamic_value) : follow(dynamic_value)"> 
    {{followed ? 'Following' : 'Follow'}} 
    </button> 
</script> 

或使用條件指令

<script id='follow-btn-template' type="text/x-template"> 
    <button v-if="followed" v-on:click="unfollow(dynamic_value)"> Following</button> 
    <button v-else v-on:click="follow(dynamic_value)"> Follow</button> 
</script> 

對於AJAX調用你要麼使用jQuery，VUE資源或Axios公司。