如何在更新后显示数据而不使用Vue js刷新页面？

Question

我正在从Index.vue上的表中显示数据。当用户单击“编辑”按钮时，将出现一个模式，他可以更新其信息。

更新成功，新数据正在插入数据库。问题是他单击“更新”按钮后，当前页面上的数据没有刷新。仅当我实际手动刷新页面时才会刷新。我是Vue的新手，也许有人可以提供帮助。

这是我的代码：

mounted() {
            this.loadGroupedData();
        },

methods: {
            loadGroupedData: async function() {
                try {
                    const response = await groupedService.loadGroupedData();
                    this.resumes = response.data.resumes;
                    this.video_one = response.data.video_one;
                    this.video_two = response.data.video_two;
                    this.video_three = response.data.video_three;
                    this.photos = response.data.photos;
                    this.profiles = response.data.profiles;
                } catch (error) {
                    this.$toast.error("Some error occurred, please refresh!");
                }
            },

updateProfile: async function() {
                try {
                    const formData = new FormData();
                    formData.append('photo_id', this.editProfileData.photo_id);
                    formData.append('employment_type', this.editProfileData.employment_type);
                    formData.append('date_of_birth', this.editProfileData.date_of_birth);
                    formData.append('experience', this.editProfileData.experience);
                    formData.append('skills', this.editProfileData.skills);
                    formData.append('resume_id', this.editProfileData.resume_id);
                    formData.append('video_one_id', this.editProfileData.video_one_id);
                    formData.append('video_two_id', this.editProfileData.video_two_id);
                    formData.append('video_three_id', this.editProfileData.video_three_id);

                    const response = await profileService.updateProfile(this.editProfileData.id, formData);

                    this.profiles.map(profile => {
                        if (profile.id == response.data.id) {
                            for (let key in response.data) {
                                profile[key] = response.data[key];
                            }
                        }
                    });

                    this.hideEditProfileModal();
                    this.$toast.success("Profile Updated Successfully!");
                } catch (error) {
                    this.$toast.error(error.response.data.message);
                }

            },

基本上，第一种方法只是返回Json响应。然后，我使用v-for将其显示在页面上。

第二个是我的Update函数。谢谢。

Answer 1

[不知道组件数据的结构，这是您在this.profiles上设置新属性的猜测。如果是这样，则必须使用this.$set，例如：

this.profiles.map(profile => {
    if (profile.id == response.data.id) {
        for (let key in response.data) {
            this.$set(profile, key, response.data[key]);
        }
    }
});