我有一个应用程序，用户可以在其中手动删除帖子中的文本和文件附件。它工作正常，用户可以删除帖子中的文本和附件，但是，问题是当用户选择“取消”按钮时——附件仍然显示编辑过的附件项目。期望的结果是将附件恢复到原始列表。
有人对我如何解决这个问题有任何建议吗？
我在这里设置了一个演示：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;
}
},
相关分类