Witam, w celach naukowych napisałem prosty kod do oceniania i obserwowania artykułów, wszystko działa jednak teraz nie wiem jak ogarnąć tego drugą część. Mam taki kod:
<template>
<div class="menagment-view-article-vjs">
<i id="followArticle" @click="followArticle" title="Obserwuj" class="icon-star-1 icon-menagment-view-article"></i>
<i id="likeUp" @click="likeUpArticle" title="Podoba mi się" class="icon-thumbs-up icon-menagment-view-article"></i>
<i id="likeDown" @click="likeDownArticle" title="Nie podoba mi się" class="icon-thumbs-down icon-menagment-view-article"></i>
</div>
</template>
<script>
export default {
data(){
return {
follow: {
id_article: '1',
type: 'Article',
},
likeUp: {
id_article: '1',
type: 'Article',
opinion: '1',
},
likeDown: {
id_article: '1',
type: 'Article',
opinion: '0',
},
errors: []
}
},
methods: {
followArticle()
{
axios.post('/follows', {
id_article: this.follow.id_article,
type: this.follow.type,
})
.then(response => {
this.reset();
});
},
likeUpArticle(){
axios.post('/opinions', {
id_article: this.likeUp.id_article,
type: this.likeUp.type,
opinion: this.likeUp.opinion,
})
.then(response => {
this.reset();
});
},
likeDownArticle(){
axios.post('/opinions', {
id_article: this.likeDown.id_article,
type: this.likeDown.type,
opinion: this.likeDown.opinion,
})
.then(response => {
this.reset();
});
},
reset()
{
this.follow.id_article = '';
this.follow.type = '';
this.likeUp.id_article = '';
this.likeUp.type = '';
this.likeUp.opinion = '';
this.likeDown.id_article = '';
this.likeDown.type = '';
this.likeDown.opinion = '';
},
}
}
</script>
<style scoped>
</style>
udaje się likować i obserwować artykuły i o to chodziło. Teraz chciałbym aby kiedy już użytkownik kliknie gwiazdkę "obserwuj" i zacznie obserwować dany artykuł ta zmieniła się na pełną oraz po ponownym kliknięciu użytkownik mógł przestać obserwować ten artykuł, podobnie z ocenami. W jaki sposób można to osiągnąć?