Javascript 带有Vue和Axios的投票按钮

我的应用程序中有一个投票按钮，可以为文章或评论投票。我几乎可以用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>

{{投票}
导出默认值{
数据（）{
返回{
投票：本次投票
}
},
道具：{
投票表决：{
要求：正确，
类型：编号
},
第条：{
要求：正确，
类型：对象
}
},
计算：{
hasvolds（）{
返回此值。票数>0；
}
},
方法：{
投票（）{
axios.post（'/article/vote/'+this.article.id）
.然后（功能（响应）{
console.log（response.data）；
this.voces=response.count；
});
}
}
}

我还想说的是，它是一款集成了vue.js的laravel 5.7应用程序。也许用组件做比较好

---

最好

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

我已经更改并简化了您的代码示例。您要做的第一件事是不要有单独的

投票

和

投票计数

属性，因为它们只是同一件事。您希望通过文章道具从后端接收初始投票，并通过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>

{{投票}
导出默认值{
数据（）{
返回{
投票：这篇文章
}
},
道具：{
第条：{
要求：正确，
类型：对象
}
},
计算：{
hasvolds（）{
返回此值。票数>0；
}
},
方法：{
投票（）{
axios.post（'/article/vote/'+this.article.id）
.然后（功能（响应）{
this.voces=response.count；
});
}
}
}
.主动{
边框颜色：透明透明#1267dc透明；
}

当您有超过1票时，

active

类将应用于具有计算属性的锚定。使用此样式绑定可以更改箭头的颜色

---

只有在XHR调用实际成功时才更改投票也是一个更好的主意，因为它可能由于某种原因而失败，并且在这种情况下不会反映正确的状态。只需使用后端的响应更新投票。

首先感谢您的回答和解释，但我认为您误解了某些内容。投票按钮应该有一个切换功能，所以如果用户投票给一篇文章，它应该改变颜色并添加+1。如果用户再次投票，则颜色应重新更改，并且该用户的计数器应为0。我获取了您的代码并正确注册了它，但是html没有显示，尽管控制台中没有错误。更改了原始的Posterhaps，您误解了stackoverflow的用法。我们不是来做你的工作的。如果你想要一个开关，你可以很容易地调整我给你的样品。也就是说，你需要绑定你的

文章

道具，并将冒号放在它前面，否则它将无法正确解释你的对象。对不起，我不想让你做我的工作。我只想让你最好地理解我的问题。抱歉不是故意的！更新了我的问题。我不知道如何获得我文章的投票权，因此将其传递给了我的vue js。现在的问题是它说不能设置未定义的属性“投票”？为什么它没有定义？我不知道，我恐怕这里不是讨论你在开发过程中遇到的每一个小错误的地方。我相信您可以在上找到它，因为这是一条非常基本的错误消息。如果您需要一些额外的指导，您可以随时下载Vue devtools的Chrome扩展。祝你们好运：）你们不理解这个指针的作用域，不像编程语言JavaScript是一种脚本语言，所以这并不总是你们在上面写代码的对象，而是调用代码的对象。。。因此，在单击时，它是按钮对象，然后查找代码搜索并将对象堆栈转到窗口对象，但找不到投票属性。。。我正试图了解这一点，所以很抱歉我无法更好地解释它，研究“JS中的范围和闭包”以及JS中的方法“绑定和调用”