mercredi 17 octobre 2018

Vote button with vue and axios

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