はVUE JS - 行の変更ボタンAjaxのレスポンス

Question

see the attachement

た後、私はレコードが読み込まと私は後に「フォロー」するボタンを変更したいv-on:click="unfollow(dynamic_value)"

を持っている各行の次ボタンを持っていますクリックと成功Ajaxのような応答

私はどのようにvueでそれを行うか分からない。

何か助けていただければ幸いです。あなたが名前のブール値を持つレコードごとにコンポーネントを作成することができ、私はあなたがあなたの記録のためのコンポーネントを作成することを示唆している

Answer 1

（https://vuejs.org/v2/guide/components.htmlを参照）

は、コンポーネントのデータであり、v-上に「続きます」 ：click directive両方のメソッドがajax呼び出しを行い、成功コールバックでブール値の状態を変更する3値条件を記述します。

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

：AJAXについては

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

はVUE-リソースまたはAxios、jQueryのを使用するかあなたを呼び出します。