Vue点击按钮无法选中目标数组对象进行更新的问题求助

1. 修正数据结构与命名冲突 #

你的data里存在命名冲突：post既用来定义单个帖子对象，又用来存储获取到的帖子数组，导致v-for="post in post"循环时覆盖变量，同时无法正确区分单个帖子和数组。修改data如下：

data() {
    return {
        posts: [], // 存储所有帖子数组，用复数命名区分
        currentEditingPost: { // 存储当前正在编辑的帖子对象
            file: "",
            content: "",
            _id: ""
        },
        showModal: false,
        showModifyPost: false,
        user: {
            firstname: "",
            lastname: "",
            _id: "",
            isAdmin: false
        },
    };
},

2. 修正获取帖子的函数 #

把获取到的帖子数组赋值给posts，而不是原来的post：

getAllPost() {
    axios
        .get('http://127.0.0.1:3000/api/post')
        .then((response) => {
            console.log("getPosts", response.data);
            this.posts = response.data; // 改为posts数组
        }).catch(error => {
            console.log(error);
        })
},

3. 修改模态框触发逻辑，绑定当前编辑的帖子 #

点击“Modifier”按钮时，把当前点击的帖子对象赋值给currentEditingPost，再打开模态框：

<div class="post" :key="post._id" v-for="post in posts"> <!-- 循环posts数组，变量名仍用post -->
    <!-- 更新按钮修改逻辑 -->
    <button @click="currentEditingPost = {...post}; showModifyPost = true" 
            v-if="post.userId == user._id  || user.isAdmin == true"
            class="button button-modify-post">Modifier</button>
    
    <!-- 模态框部分 -->
    <transition name="fade" appear>
        <div class="modal-overlay" v-if="showModifyPost" @click="showModifyPost = false"></div>
    </transition>
    <transition name="slide" appear>
        <div class="modifiyPostModal" v-if="showModifyPost">
            <span>
                <h2 class="center-text">Modifier votre publication</h2>
                <div class="close-post_button" @click="showModifyPost = false">
                    <font-awesome-icon class="close_create_post" icon="fa-solid fa-circle-xmark" />
                </div>
            </span>
            <form enctype="multipart/form-data">
                <div>
                    <!-- 绑定到当前编辑帖子的content -->
                    <input class="textPost" name="createPost" placeholder="Quoi de neuf ?"
                        v-model="currentEditingPost.content" />
                </div>
                <div class="center-sendbutton">
                    <!-- 文件选择事件修改 -->
                    <input type="file" class="publishPost" id="changePicture" 
                           @change="selectFile" ref="file" />
                    <!-- 提交时传入当前编辑帖子的ID -->
                    <button type="submit" @click.prevent="updatePost(currentEditingPost._id)" 
                            class="publishPost">Modifier</button>
                </div>
            </form>
        </div>
    </transition>
</div>

4. 修正文件选择与更新帖子函数 #

• 修正selectFile，把选中的文件赋值给当前编辑的帖子：

selectFile() {
    this.currentEditingPost.file = this.$refs.file.files[0];
},

• 修改updatePost，使用currentEditingPost的数据，不再固定取索引1：

updatePost(id) {
    const formData = new FormData();
    // 使用当前编辑帖子的文件和内容
    if (this.currentEditingPost.file) {
        formData.append("image", this.currentEditingPost.file);
    }
    formData.append("content", this.currentEditingPost.content);
    
    axios.put(`http://127.0.0.1:3000/api/post/${id}`, formData,
        {
            headers: {
                Authorization: "Bearer " + localStorage.getItem("token"),
                // 注意：上传FormData时不要设置Content-Type为application/json，浏览器会自动处理
                // 'Content-Type': 'application/json', 这行要删掉
            },
        })
        .then(response => {
            console.log(response);
            this.showModifyPost = false; // 关闭模态框
            this.getAllPost(); // 重新获取帖子，不用刷新页面
            // location.reload("/accueil"); 不建议用刷新，重新调用接口更友好
        }).catch(e => {
            console.log(e);
        })
},

额外注意点 #

原submitCreatePost函数里用了this.posts.file，这里逻辑有误，建议新增一个单独的newPost对象用于创建帖子：

// data里新增
newPost: {
    file: "",
    content: ""
},
// 然后submitCreatePost里改成
formData.append('image', this.newPost.file);
formData.append('content', this.newPost.content);
// 清空时也改成
this.newPost.content = "";
this.newPost.file = "";

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