событие изменения ввода файла игнорируется при загрузке того же имени файла

Question

Я мое приложение Vue. js Я использую компонент Vuetify v-file-input . Загруженный файл привязан к formData.file, и я проверяю загруженный файл с помощью rules prop.

<v-file-input
  :rules="fileValidationRules"
  v-model="formData.file"
/>

Если я загружаю файл /tmp/foo.txt, все работает, как ожидалось, однако, если я изменю содержимое этого файла и загрузите его снова, fileValidationRules не вызывается.

По-видимому, причина в том, что Chrome не запускает событие изменения, если имя файла такое же . Есть ли способ обойти это, чтобы гарантировать, что каждый файл, выбранный пользователем, привязан к formData.file и вызывает fileValidationRules?

Answer 1

Вы можете установить значение входного файла как null.

<v-file-input
  :rules="fileValidationRules"
  v-model="formData.file"
  ref="file"
/>

onClick() {
   this.$refs.file.value = null;
}

Answer 2

Устанавливает значение ввода равным null для каждого события onclick. Это сбросит значение входа и вызовет событие onchange, даже если выбран тот же путь.

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};​