Как показать, если следовать или нет Vue Js

Question

Я пытаюсь создать кнопку отслеживания, уже написал код, поэтому, когда пользователь следует, он сразу переходит к базе данных, идентификатору пользователя и последующему идентификатору пользователя, в компоненте я написал код, который проверяет,за пользователем уже следят, чтобы он возвращал истину и ложь, а затем, если для «true» следует отображать «следует» и наоборот, но до сих пор, когда страница загружается, она показывает, что за ней следует «истина», если я перехожу на другую страницу и возвращаюсь, она возвращаетсячтобы показывать следующее, что является ложным, пока я не обновлю всю страницу снова

 <template>
  <button v-bind:class="{followVendor:!following,followingVendor:following}"  
      type="button"
            @click="followToggle"
        class=" btn btn-sm btn-outline">
        {{followText}}</button>

</template>



data:{
  userFollowing:{},
  following: false,
  followText:'follow',
 }

mounted(){
  axios.get(`/api/user-following`,
    {
      headers: { Authorization: `Bearer ${this.user.access_token}` }
    }).then(
        response=>{
            if (response.status === 200) {
                this.userFollowing = response.data;
                this.writer=true;

                if (this.userFollowing.length > 0) {
                    if (this.userFollowing[0].user_id === this.user.id && this.userFollowing[0].vendorId === this.writterD.id) {
                        this.following = true;
                        this.followText = 'following';
                }
                }
            }


        }
    )
}

 methods: {

follow(params, name) {

  let data = {
    vendorName: name,
    vendorId: params
  };
  if (this.auth) {
    axios
      .post("/api/user-following", JSON.parse(JSON.stringify(data)), {
        headers: { Authorization: `Bearer ${this.token}` }
      })
      .then(response => {


        if (response.status === 201) {
           this.following = true;
           this.followText = 'following';
          this.$toasted.success("Successfully followed");
        } else if (response.data === " Already following") {
          this.$toasted.error("Already following");
        } else {
          this.$toasted.error("Error");
        }
      })
      .catch(error => {
        console.log(error);
      });
  } else {
    this.$toasted.error("You have to log in to follow");
  }
},
unFollow(){

    let vendor = this.writterD.id;
   let unfollow = confirm(`unfollow ${this.writterD.storeName}?`)
   if (unfollow) {

    axios.delete(`/api/user-following/${vendor}`,
    {headers: {Authorization: `Bearer ${this.token}`}}).
    then(response=>{

    if (response.status === 200) {
         this.following = false;
         this.followText = 'follow';
          this.$toasted.success("Successfully Unfollowed");

        }else{
             this.$toasted.error("Already Unfollowed");
        }

    })
   }

},
 followToggle(){
            this.following? this.unFollow(): this.follow(this.writterD.id, this.writterD.storeName);
    },
 }

как я могу сделать так, чтобы он всегда показывал правильный, даже если я не перезагружаю всю страницу, пожалуйста

Answer 1

Что вам нужно сделать, это вызвать повторное рендеринг, лучший способ сделать это - поместить key в компонент, который необходимо обновить, и затем изменить ключ при обновлении информации. Когда ключ будет обновлен, данные будут обновлены, так как компонент будет перерисован. Как это:

<button :key="update" v-bind:class="{followVendor:!following,followingVendor:following}"  
      type="button"
            @click="followToggle"
        class=" btn btn-sm btn-outline">
        {{followText}}</button>
    ...
    data(){
       return {
           update: 0
    }
}
...
    this.followText = 'following';
    this.update++

Смотрите здесь для хорошей статьи по теме: https://michaelnthiessen.com/force-re-render