How to set multiple conditions inside of the :disabled property in vuetify?

Question

I am working on a feature to allow users to upload files. I need to disable the 'Add file' button when

1) the field is empty

2) when the file size exceeds 100MB

This is the button:

<v-btn rounded :disabled="!uploadedFiles || fileSizeValidation" @click="confirmFileAdd">Add</v-btn>

This is what is inside of data:

    data: () => ({
    uploadedFiles: null,
    fileSizeValidation: [
        files => !files || !files.some(file => file.size > 100000000) || 'File size should be less than 100 MB!'
    ],
}),

Using either

:disabled="!uploadedFiles || fileSizeValidation" or :disabled="!uploadedFiles && fileSizeValidation"

unfortunately does not work.

|| actually yields an error:

How can I make sure the button is disabled for both conditions?

Answer 1

You can use a computed property. This property will recompute every time uploadedFiles changes.

  computed: {
    fileSizeValidation() {
      return (
        !this.uploadedFiles ||
        this.uploadedFiles.length <= 0 ||
        this.uploadedFiles.some(file => !file.size ||file.size > 100000000)
      );
    }
  }

And then use it like that

<v-btn rounded :disabled="!this.uploadedFiles || this.uploadedFiles.length <= 0 || fileSizeValidation @click="confirmFileAdd">Add</v-btn>

Example :

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    numberInput: 10,
    uploadedFiles: []
  },
  methods: {
    test() {
      this.msg = "Hello World !";
    }
  },
  computed: {
    fileSizeValidation() {
      return this.uploadedFiles.some(file => !file.size || file.size > 100000000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" v-model="numberInput" />
  <button @click="uploadedFiles.push({ size : numberInput })">Add</button> {{ uploadedFiles }}
  <button :disabled="!this.uploadedFiles || this.uploadedFiles.length <= 0 || fileSizeValidation">Submit</button>
</div>

https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties