在Chrome/Safari中删除和重新添加元素到数组不会更新数组

Question

我有一个文件上传组件，我可以删除选定的文件，我尝试了this.files.splice(index, 1);和this.$delete(this.files, index);

如果我用this.files = [...this.$refs.fileUpload.files];重新添加一个删除的文件，它不会被添加到文件数组中。如果我选择一个不同的文件，它会显示出来，所以我猜这是一个反应性问题。

简化组件:

<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>

奇怪的是，这种方式在Firefox中是有效的。

Answer 1

我通过在this.$delete(this.files, i);之后添加this.$refs.fileUpload.value = null;来修复我的问题。这样，仍在文件上传输入上的文件将被重置。