update follow status after axios request in Vue

Question

i need to update the follow an unfollow button after axios request

    <template>
        <div v-if="isnot">
        <a href="#"  @click.prevent="unfellow" v-if="isfollowing" >unFellow</a>
        <a href="#" @click.prevent="fellow"  v-else >Fellow</a>
        </div>
    </template>

My Methods

            fellow () {
                axios.post(`/@${this.follower}/follow/`)
            },
            unfellow () {
                axios.post(`/@${this.follower}/unfollow/`)
            },
        }

Answer 1

A basic example:

fellow () {
     var self = this;
     axios.post(`/@${this.follower}/follow/`)
     .then(function (response) {
          self.isfollowing = true;
     })
     .catch(function (error) {
          console.log( error.response.data);
     });
},

Answer 2

Axios has a series of methods you can execute after the response arrives. In the case of a post call your structure can be something like this

axios.post(YOUR ROUTE)
  .then(function (response) {
    //executes after getting a successful response
    // here you can change your 'isfollowing' variable accordingly

  })
  .catch(function (error) {
    //executes after getting an error response
  });

Answer 3

Fast way:

<template>
    <div v-if="isnot">
        <a href="#"  @click.prevent="fellowUnfellow" v-if="isfollowing" >{{isfollowing ? "unFellow" : "Fellow"}}</a>
    </div>
</template>

fellowUnfellow () {
   axios.post(`/@${this.follower}/follow/`).then(function (r) {
       this.isfollowing = !this.isfollowing;
   })
}