Блог

Привет, я пытаюсь проверить, не является ли файловый ввод пустым, поэтому я делаю это:

Мой HTML-код:

 <input accept="image/jpeg, image/png, image/gif" type="file" class="form-control" v-on:change="onFileChange">
  

Я выполняю проверку с помощью кнопки:

 <button 
     :disabled="I need to know what it'll be here ? !isDisabled : isDisabled"
     type="submit"
     class="btn btn-success btn-icon-split">
      <span class="icon text-white-50">
         <i class="fas fa-check"></i>
      </span>
     <span class="text">Guardar</span>
</button>
  

Но я не знаю, как это сделать, потому что у него нет v-model, и я не знаю, как проверить, пусто ли оно. Как я мог это сделать?

Спасибо

 <div id="app">
    <input type="file" @change="fileChange">
    <button :disabled="noFiles">Submit</button>
</div>
  

С помощью Composition API

 const { createApp, ref } = Vue;

createApp({
    setup() {
        const noFiles = ref(true);
        const fileChange = (e) => noFiles.value = !e.target.files.length;

        return { noFiles, fileChange };
    },
}).mount('#app');
  

Без Composition API

 new Vue({
    el: '#app',
    
    data: () => ({
        noFiles: true,
    }),

    methods: {
        fileChange(event) {
            this.noFiles = !event.target.files.length;
        }
    }
});
  

Вам нужно что-то вроде этого:

 data(){
   return{
      file: null,
   }
}

methods: {
   onFileChange(){
      this.file = event.target.files[0];
   }, 
}
  

и проверьте метод отправки кнопки:

 if(this.file !== null){
   //some code
}
  

Добавьте a ref к входному файлу, затем внутри обработчика отправки проверьте this.$refs.file.files длину :

  <input accept="image/jpeg, image/png, image/gif" ref="file"
    type="file" class="form-control" v-on:change="onFileChange">
  

   save(){
      console.log(this.$refs.file.files.length)
    }
  

ЖИВОЙ ПРИМЕР