Vue CLI中v-for循环获取帖子_id实现对应帖子点赞功能的问题

核心修改点 #

• 给点赞按钮的点击事件传入当前遍历帖子的唯一_id，同时将v-for的key替换为_id避免数组变动时出现渲染异常
• 调整addLike方法接收传入的帖子id参数，请求接口时直接使用该参数，请求成功后同步更新本地列表的点赞数实现页面实时刷新

1. v-for渲染部分修改后代码 #

<div class="posts" v-for="element in postArray" :key="element._id">
    <p>{{ element.title }}</p>
    <p>{{ element.content }}</p>
    <p>{{ element.likes.length }}</p>
    <button @click="addLike(element._id)">Add Like</button>
</div>

2. addLike方法修改后代码 #

async addLike(postId) {
  const url = "https://dw-s3-nice-master-cake.osc-fr1.scalingo.io/post/like";
  const options = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "bearer " + localStorage.getItem("token"),
    },
    body: JSON.stringify({
      postId: postId,
    }),
  };
  const response = await fetch(url, options);
  const data = await response.json();
  console.log(data);
  // 接口请求成功后更新本地列表的点赞数
  // 下方的状态码判断可根据你接口实际返回的成功标识调整
  if (response.ok) {
    const targetPost = this.postArray.find(item => item._id === postId)
    if (targetPost) {
      // 如果接口返回了最新的点赞列表可直接替换，这里先做长度+1处理
      targetPost.likes.push({})
    }
  }
},

额外说明 #

原data中定义的postId字段已经不需要使用，可以直接删除。

内容的提问来源于stack exchange，提问作者Jorge_RM