时间戳

首页 > 解决方案 > 在 Chrome/Safari 中删除和重新添加元素不会使用 Vue 更新数组

javascript - 在 Chrome/Safari 中删除和重新添加元素不会使用 Vue 更新数组

问题描述

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

如果我用 重新添加已删除的文件this.files = [...this.$refs.fileUpload.files];，则不会将其添加到 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 中有效。

标签： javascriptvue.js

解决方案

我通过添加this.$refs.fileUpload.value = null;after解决了我的问题this.$delete(this.files, i);。这样，仍然在文件上传输入上的文件将被重置。

推荐阅读