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公司。