Кнопка голосования с Vue и Axios - PullRequest
Новая
       6

Кнопка голосования с Vue и Axios

0 голосов
/ 17 октября 2018

В моем приложении есть кнопка голосования, чтобы голосовать за статьи или комментарии.Я почти получил это для работы с ajax, но синхронизация кликов и счетчика - большая проблема.Сейчас я пытаюсь сделать это с помощью vue js, потому что кто-то рекомендовал сделать это, ссылаясь на Синхронизировать кнопку голосования с функцией внутреннего голосования .

Я должен сказать, что я новичок в Vue JS и надеюсь, что кто-то может помочь мне заставить это работать.Небольшое уточнение, как я хочу, чтобы это работало.Пользователь может переключить кнопку голосования, чтобы он добавил +1 или 0 и изменил цвет, как здесь, в стеке, но только с помощью кнопки вверх.

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

<template>
  <div>
      <a class="vote" :class="{ active: hasVotes }" @click="vote"></a>
      <div class="points">{{ votes }}</div>
  </div>
</template>

<script>
    export default {
        data(){
            return{
                votes: this.voted
            }
        },

        props: {
            voted: {
                required: true,
                type: Number
            },
            article: {
                required: true,
                type: Object
            }
        },

        computed: {
            hasVotes() {
                return this.votes > 0;
            }
        },

        methods:{
            vote(){
                axios.post('/article/vote/' + this.article.id)
                    .then(function (response) {
                        console.log(response.data);
                        this.votes = response.count;
                    });
            }
        }
    }
</script>

Что я еще хочу сказать, это то, что это приложение laravel 5.7 с интегрированным vue.js.Может быть, лучше сделать это с компонентами ...?

Best

1 Ответ

0 голосов
/ 17 октября 2018

Было бы проще инкапсулировать это в компоненте, потому что Vue управляется данными, и теперь вам действительно нужно погрузиться в DOM и манипулировать цветом стрелки для конкретной стрелки, когда ваш счетчик больше 0.

Я изменил и упростил ваш пример кода.Первое, что вы хотите сделать, это не иметь отдельные свойства votes и voteCount, потому что они просто одно и то же.Вы хотите получить начальные голоса от бэкэнда через опору статьи и обновить его с помощью своего звонка XHR.

Я смоделировал быстрый пример, который я не проверял, но это должно заставить вас двигаться в правильном направлении..

Пример: 

<upvote-arrow :article="{{ $article }}"></upvote-arrow>

Компонент: 

<template>
    <div>
        <a class="arrow" :class="{ active: hasVotes }" @click="vote"></a>
        <div class="points">{{ votes }}</div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                votes: this.article.votes
            }
        },

        props: {
            article: {
                required: true,
                type: Object
            }
        },

        computed: {
            hasVotes() {
                return this.votes > 0;
            }
        },

        methods:{
            vote(){
                axios.post('/article/vote/' + this.article.id)
                    .then(function (response) {
                        this.votes = response.count;
                    });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .active {
        border-color: transparent transparent #1267dc transparent;
    }
</style>

Класс active будет применен к привязке с вычисляемым свойством, если у вас более 1голос.С этим стилем привязки вы можете изменить цвет стрелки.

Также лучше менять голоса только тогда, когда вызов XHR действительно успешен, потому что он может потерпеть неудачу по какой-то причине, а правильное состояние неотражено в этом случае.Просто обновите голосование ответом бэкэнда.

...