myspace/src/components/UserProfilePost.vue

<template>
<div class="card">
    <div class="card-body">
        <div v-for="post in posts.posts" :key = "post.id">
            <div class="card singlePost">
                <div class="card-body">
                    {{post.content}}
                    <button @click="delete_a_post(post.id)" v-if="is_me" type="button" class="btn btn-danger btn-sm">删除该贴</button>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {computed} from "vue";
import {useStore} from "vuex";
import $ from "jquery";


export default {
    name: "UserProfilePost",
    props: {
        // 父组件发送过来两个属性:posts和user
        posts:{
            type : Object,
            required: true,
        },
        user: {
            type : Object,
            required: true,
        }
    },
    setup(props,context) {
        const store = useStore();
        // 如果不是自己的页面，不展示删除帖子按钮
        let is_me = computed(() => store.state.user.id === props.user.id);
        const delete_a_post = post_id => $.ajax({
            url: "https://app165.acapp.acwing.com.cn/myspace/post/",
            type: "DELETE",
            headers: {
                "Authorization": "Bearer " + store.state.user.access,
            },
            data:{
                post_id: post_id,
            },
            success(resp) {
                if (resp.result === "success"){
                    context.emit("delete_a_post",post_id);
                }
            }
        });

        return {
            is_me,
            delete_a_post,
        }
    }

}
</script>

<style scoped>
.singlePost{
    margin-bottom: 10px;
}
button {
    float: right;
}
</style>