如何使用 Vue 知道文件输入是否不为空

Question

您好，我正在尝试验证文件输入是否不为空，所以我这样做：

我的 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 并且我不知道如何检查它是否为空。我怎么能这么做呢？

谢谢

Answer 1

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

使用组合 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');

没有组合 API

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

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