vue3 ts怎么在原数据上做点赞

假设你的数据结构如下：

interface Post {
  id: number;
  title: string;
  content: string;
  likes: number;
}

你可以在模板中使用 `v-for` 指令遍历所有帖子，然后在每个帖子上绑定点赞按钮的点击事件。当点击点赞按钮时，可以调用一个方法来更新该帖子的点赞数。

在 Vue 3 中，你可以使用 `reactive` 函数将数据转换为响应式对象，以便在模板中使用双向绑定来更新数据。例如：

import { reactive } from 'vue';

export default {
  setup() {
    const posts = reactive<Post[]>([
      { id: 1, title: 'Post 1', content: 'Content of post 1', likes: 0 },
      { id: 2, title: 'Post 2', content: 'Content of post 2', likes: 0 },
      { id: 3, title: 'Post 3', content: 'Content of post 3', likes: 0 },
    ]);

    const likePost = (post: Post) => {
      post.likes++;
    };

    return {
      posts,
      likePost,
    };
  },
};

然后在模板中遍历帖子数组，绑定点赞按钮的点击事件，并显示点赞数：

<template>
  <div>
    <h2>Posts</h2>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <h3>{{ post.title }}</h3>
        <p>{{ post.content }}</p>
        <button @click="likePost(post)">👍 {{ post.likes }}</button>
      </li>
    </ul>
  </div>
</template>

这样，当用户点击点赞按钮时，会调用 `likePost` 方法来更新对应帖子的点赞数，并且界面上也会实时地更新点赞数。