Vue js berechnet Ergebnis nicht genau

Question

Ich versuche, eine Abstimmungsschaltfläche mit vue js zu implementieren, wenn der Benutzer auf "Vote" klicken wird Axios Anfrage an den Server senden und speichern Sie die Daten, dann zurück json zurück. Gleiches gilt für die Stimme. Ich überprüfe auch, ob der Benutzer gewählt wird, sollte der Button zu Unvote wie Facebook wechseln. Bis jetzt funktioniert die Schaltfläche für Abstimmung und Unvotieren korrekt. Aber ich habe ein Problem gefunden, das die gewählten Funktionen nicht funktioniert. Wenn der Benutzer gewählt hat, wird nach der Aktualisierung wieder zu "Vote" gewechselt, aber es sollte Unvote sein. Aber wenn die Schaltfläche geklickt wurde, wird in der Datenbank angezeigt, dass die Abstimmung gelöscht wurde. Es sollte bedeuten, dass Probleme berechnet werden. Aber ich kämpfe darum, weil ich nicht wirklich weiß, was es ist.

Dies ist meine vue Komponenten.

<template> 

<a href="#" v-if="isLiked" @click.prevent="unlike(comment)"> 
    <span>UnVote</span> 
</a> 

<a href="#" v-else @click.prevent="like(comment)"> 
    <span>Vote</span> 
</a> 

<script> 
export default{ 
    props: ['comment','liked'], 
    data: function() { 
     return { 
      isLiked: '', 
     } 
    }, 
    mounted() { 
     axios.get('/comment/'+ this.comment.id +'/check', {}) 
      .then((response) => { 
       this.liked = response.data;//here will get json "true" or "false" 

      }); 

     this.isLiked = this.liked ? true : false; 
    }, 
    computed: { 
     isLike() { 
      return this.liked; 
     }, 
    }, 
    methods: { 
     like(comment) { 
      axios.post('/comment/'+ comment.id +'/like') 
       .then(response => this.isLiked = true) 
       .catch(response => console.log(response.data)); 
     }, 
     unlike(comment) { 
      axios.post('/comment/'+ comment.id +'/unlike') 
       .then(response => this.isLiked = false) 
       .catch(response => console.log(response.data)); 
     }, 
    } 

} 

Answer 1

Ihre Komponenteninstanz hat keinen liked Dateneigenschaft und Sie sollten versuchen, nicht prop Werte zu setzen (siehe https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow)

Auch Sie versuchen, Setzen Sie den Wert isLiked außerhalb des asynchronen Vorgangs, der nicht funktioniert, wie Sie denken.

Einfach die isLiked Eigenschaft ...

mounted() { 
    axios.get('/comment/'+ this.comment.id +'/check', {}) 
     .then((response) => { 
      this.isLiked = response.data; //here will get json "true" or "false" 
     }); 
}, 

Ihre isLike berechnete Eigenschaft auch nie verwendet.