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属性，因为它们只是同一件事。您希望通过文章道具从后端获得初始投票，并通过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类将应用于具有计算属性的锚。通过这种样式绑定，您可以更改箭头的颜色。

最好还是仅在XHR调用实际成功时才更改投票，因为它可能由于某些原因而失败，并且在这种情况下无法反映正确的状态。只需使用后端的响应来更新投票。

Vue和Axios的投票按钮

1 个答案: