Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Deleting and re-adding element to array does not update array with Vue in Chrome/Safari without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
I have a file upload component where I can remove selected files, I tried both this.files.splice(index, 1);
and this.$delete(this.files, index);
if I re-add a removed file with this.files = [...this.$refs.fileUpload.files];
, it doesn’t get added in the files array. If I select a different file it does show up, so I’m guessing this is a reactivity issue.
The simplified component:
<template> <div class="file-upload-component"> <div class="upload-area" > <label for="fileUpload" class="component-info"> <span>Add files</span> </label> <input type="file" style="display:none" @change="addFiles" ref="fileUpload" id="fileUpload" /> <div class="file-list"> <div class="file-list__file" v-for="(file, index) in files" :key="index"> <span>{{ file.name }}</span> <button @click="remove(index)" class="cancel" > remove </button> </div> </div> </div> </div> </template> <script> export default { data() { return { files: [], }; }, methods: { addFiles() { this.files = [...this.$refs.fileUpload.files]; }, remove(i) { this.$delete(this.files, i); }, }, }; </script> <style lang="scss" scoped> .upload-area { width: 100%; height: 356px; .component-info { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .file-list { margin: 20px; .cancel { margin-left: 10px; } } } </style>
The strange thing is this way works in Firefox.
Answer
I fixed my issue by adding this.$refs.fileUpload.value = null;
after this.$delete(this.files, i);
. This way the files still on the file upload input are reset.
We are here to answer your question about Deleting and re-adding element to array does not update array with Vue in Chrome/Safari - If you find the proper solution, please don't forgot to share this with your team members.