Question

我正在尝试使用vue js实现投票按钮，当用户点击＆＃34;投票＆＃34;将axios请求发送到服务器并存储数据，然后返回json。与unvote相同。我还检查用户是否被投票，该按钮应该改为Unvote，如facebook。到目前为止，投票和非投票按钮工作正常。但我发现了一个问题，即投票功能无效。如果用户投票，在刷新页面之后它将变回＆＃34;投票＆＃34;，但它应该是Unvote。但是如果单击该按钮，则数据库中将显示已删除的投票。意味着它应该是计算的问题。但我很挣扎，因为我不知道vue js。

这是我的vue组件。

<template>

<a href="#" v-if="isLiked" @click.prevent="unlike(comment)">
    <span>UnVote</span>
</a>

<a href="#" v-else @click.prevent="like(comment)">
    <span>Vote</span>
</a>

<script>
export default{
    props: ['comment','liked'],
    data: function() {
        return {
            isLiked: '',
        }
    },
    mounted() {
        axios.get('/comment/'+ this.comment.id +'/check', {})
            .then((response) => {
                this.liked = response.data;//here will get json "true" or "false"

            });

        this.isLiked = this.liked ? true : false;
    },
    computed: {
        isLike() {
            return this.liked;
        },
    },
    methods: {
        like(comment) {
            axios.post('/comment/'+ comment.id +'/like')
                .then(response => this.isLiked = true)
                .catch(response => console.log(response.data));
        },
        unlike(comment) {
            axios.post('/comment/'+ comment.id +'/unlike')
                .then(response => this.isLiked = false)
                .catch(response => console.log(response.data));
        },
    }

}

Answer 1

您的组件实例没有liked数据属性，您不应尝试设置prop值（请参阅https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow）

此外，您正试图在异步操作之外设置isLiked值，这与您的想法无关。

只需设置isLiked属性...

即可

mounted() {
    axios.get('/comment/'+ this.comment.id +'/check', {})
        .then((response) => {
            this.isLiked = response.data; //here will get json "true" or "false"
        });
},

您的isLike计算属性也从未使用过。

Vue js计算结果不准确

1 个答案: