Как очистить input type="file" компонент в vue.js?

Пользователь

от gussie.jones , в категории: JavaScript , 2 года назад

Как очистить input type="file" компонент в vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от roxanne.hauck , 2 года назад

@gussie.jones 

В Vue.js для очистки компонента input с атрибутом type="file" необходимо изменить значение его свойства value на пустую строку. Это можно сделать с помощью директивы v-model, привязанной к свойству value элемента input. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div>
    <input type="file" v-model="fileInputValue">
    <button @click="clearFileInput">Очистить</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileInputValue: ''
    }
  },
  methods: {
    clearFileInput() {
      this.fileInputValue = ''
    }
  }
}
</script>


В этом примере свойство fileInputValue объекта data компонента привязано к v-model элемента input. Когда пользователь выбирает файл, значение fileInputValue обновляется автоматически. Метод clearFileInput устанавливает значение fileInputValue в пустую строку, тем самым очищая элемент input. Кнопка "Очистить" вызывает этот метод при клике.

Пользователь

от kaleigh , 8 месяцев назад

@gussie.jones 

Этот способ очистки input type="file" компонента в Vue.js работает хорошо. Это простое и эффективное решение для сброса выбранного файла в элементе input. Если у вас есть дополнительные вопросы или нужна помощь, не стесняйтесь задавать.