VueJS Axios 喜欢/不喜欢 onClick答案

【问题标题】：VueJS Axios Like/Dislike onClickVueJS Axios 喜欢/不喜欢 onClick
【发布时间】：2022-08-03 00:12:20
【问题描述】：

我正在尝试使用 axios 在 vuejs 上构建一个类似的按钮。

我有一个在邮递员上完美运行的 mongoDB 控制器。但我不能让它在前端工作。

我想在 usersLiked 数组中添加 userId，我想在点击时在 like 计数器中添加 1。如果用户点击一个已经喜欢的按钮，我想从数组中取出他的用户 ID 并在点赞计数器上执行 0。

那是我的架构

const postSchema = mongoose.Schema({
    userId: { type: String, required: true, ref: \"User\" },
    content: { type: String, required: true, trim: true },
    imageUrl: { type: String, trim: true },
    likes: { type: Number, default: 0 },
    usersLiked: [{ type: String, ref: \"User\" }],
    firstname: {type: String, required: true, trim: true },
    lastname: {type: String, required: true, trim: true },
    created_at: { type: Date},
    updated_at: { type: Date }

});

这是我试过的 axios 功能

likePost() {
            const thisPostId = localStorage.getItem(\"ThisPostId\")
            axios
                .post(\'http://127.0.0.1:3000/api/post/like/\' + thisPostId, {
                    headers: {
                        Authorization: \"Bearer \" + localStorage.getItem(\"token\"),
                    },
                })
                .then((response) => {
                    console.log(response.data);
                    this.$set(this.post, \'usersLiked\', this.post.usersLiked !== response?.data?._id)
                })
                .catch((error) => console.log(error));
        }
    },

html

<div v-if=\"post.usersLiked == user._id\">
                        <div class=\"like-setup\">
                            <p class=\"likes\">{{ post.likes }} like !</p>
                            <button v-on:click=\"likePost(post._id)\" style=\"color: pink\" type=\"submit\"
                                title=\"Aimer ce post !\" class=\"button\">
                                <font-awesome-icon icon=\"fa-solid fa-thumbs-up\" /> Like !
                            </button>
                        </div>
                    </div>
                    <div v-else>
                        <div class=\"like-setup\">
                            <p class=\"likes\">{{ post.likes }} like !</p>
                            <button v-on:click=\"likePost(post._id)\" type=\"submit\" title=\"Aimer ce post !\"
                                class=\"button\">
                                <font-awesome-icon icon=\"fa-solid fa-thumbs-up\" /> Like !
                            </button>
                        </div>
                    </div>

这是我的数据

data() {
        return {
            posts: [],
            post: {
                file: \"\",
                content: \"\",
            },
            showModal: false,
            showModifyPost: false,
            user: {
                firstname: \"\",
                lastname: \"\",
                _id: \"\",
            },
        };
    },

$set(this.post, \'usersLiked\', this.post.usersLiked !== response?.data?._id) - 您分配布尔值，而需要一个字符串
哦，好的，我明白了。谢谢你

标签： vue.js axios

【解决方案1】：

添加一个计算函数来获取当前用户的点赞状态在这里会很有帮助。

{
  computed: {
    myLikeStatus() {
      return !!this.posts.usersLiked.find(item => item === this.user._id)
    }
  }
}

使用此计算函数，您应该能够在like 按钮上设置类以显示already-liked 状态。

现在在 LikePost 方法中，只需将响应数据分配给反应式 posts 变量，如下所示：

{
  methods: {
    likePost() {
            const thisPostId = localStorage.getItem("ThisPostId")
            axios
                .post('http://127.0.0.1:3000/api/post/like/' + thisPostId, {
                    headers: {
                        Authorization: "Bearer " + localStorage.getItem("token"),
                    },
                })
                .then((response) => {
                    console.log(response.data);
                    this.post = response.data
                })
                .catch((error) => console.log(error));
        }
    },
  }
}

【讨论】：

谢谢你，我会试试的，知道！