取消后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;      }    },