I have an vote button in my app to vote for articles or comments. I almost got that to work with ajax but the sync of clicks and counter is the big problem. I now try to do it with vue js because someone recommended to do so referring to Sync vote button with backend vote function. I have to say I am new to vue js and hope that someone can help me to get this to work. A little specification how I want it to work. A user can toggle the vote button so it adds +1 or 0 and changes the color like here on stack but only with an up button. What I have for now sends the request to the backend and stores the vote in the database but I dont know how to set up the counter and color properly. What I have so far. Live you can inspect it here: https://www.cnews.at/newest
<div class="votes">
<div id="article" :article="" :votes="">
@if(Auth::check() && Auth::user()->ownsArticle($article))
<span class="dot"></span>
@else
<a class="vote" @click="voteArticle":disabled="disabled"></a>
@endif
<div class="points" v-text="voteCount"></div>
</div>
</div>
and here my vue js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
new Vue({
el: '#article',
data(){
return{
votes: {!! json_encode($article->votes->count()) !!},
disabled:false,
voteCount: 0,
article: {!! json_encode($article) !!},
}
},
methods:{
voteArticle(){
this.voteCount = this.votes++;
axios.post('/article/vote/' + this.article.id)
.then(function (response) {
this.voteCount = response.count;
console.log(response)
});
}
}
})
</script>
What I have else to say is that it is an laravel 5.7 app with vue.js integrated. Maybe it is better to do it with components...?
Best
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire