javascript - 使用 Vue 和 Axios 进行投票按钮

Question

我的应用程序中有一个投票按钮，可以对文章或评论进行投票。我几乎可以使用ajax，但点击和计数器的同步是个大问题。我现在尝试使用 vue js 来做到这一点，因为有人建议这样做引用 Sync vote button with backend vote function 。

我不得不说我是 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>

我还要说的是，它是一个集成了 vue.js 的 Laravel 5.7 应用程序。也许用组件来做会更好......？

最佳

Answer 1

将其封装在组件中会更容易，因为 Vue 是数据驱动的，现在您实际上必须深入 DOM 并在计数大于 0 时操作特定箭头的箭头颜色。

我已经更改并简化了您的代码示例。您要做的第一件事就是不要拥有单独的 votes 和 voteCount 属性，因为它们只是同一件事。您希望通过文章 Prop 从后端接收初始投票，并通过 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>

当您拥有超过 1 票时，active 类将应用于具有计算属性的 anchor 。使用此样式绑定(bind)，您可以更改箭头的颜色。

最好仅在 XHR 调用实际成功时更改投票，因为它可能会因某种原因失败，并且在这种情况下不会反射(reflect)正确的状态。只需使用后端的响应更新投票即可。