取消后VueJS表单不会恢复到原始状态

Question

我有一个应用程序，用户可以在其中手动删除帖子中的文本和文件附件。它工作正常，用户可以删除帖子中的文本和附件，但是，问题是当用户选择“取消”按钮时——附件仍然显示编辑过的附件项目。期望的结果是将附件恢复到原始列表。

有人对我如何解决这个问题有任何建议吗？

我在这里设置了一个演示：Codesandbox（单击 POSTS --> POST ID --> EDIT POST --> 删除附件 --> CANCEL EDIT）

我正在使用道具将数据传递给子组件：

父组件命名为PostDetail.vue：

模板：

<section v-if="editPostFormIsVis">

      <EditPost

        :post="post"

        @update="editPostFormIsVis=false"

        @cancel="editPostFormIsVis = false"

        :attachmentsArray="attachmentsArray"

        @deleteMediaAttachment="removeItem"

      />

    </section>

脚本：

import attachments from "../../public/attachments.json";

import EditPost from "@/components/EditPost.vue";

export default {

  components: {

    EditPost

  },

  data() {

    return {

      post: {},

      editPostFormIsVis: false,

      attachmentsArray: attachments

    };

  },

  created() {

    this.getPost();

  },

  methods: {

    getPost() {

      axios

        .get(

          "https://jsonplaceholder.typicode.com/posts/" + this.$route.params.id

        )

        .then(resp => {

          this.post = resp.data;

        })

        .catch(err => {

          console.log(err);

        });

    },

    editPost() {

      this.editPostFormIsVis = true;

    },

    removeItem: function(item) {

      this.attachmentsArray.attachments.splice(item, 1);

    }

  },

  computed: {

    emailAttachmentsFileNames() {

      if (this.attachmentsArray.emailAttachments) {

        const emailAttachmentsFileNameArray = this.attachmentsArray.emailAttachments.map(

          item => {

            const tokens = item.split("/");

            return tokens[tokens.length - 1];

          }

        );

        return emailAttachmentsFileNameArray;

      } else {

        return null;

      }

    },