Как установить несколько условий внутри свойства: disabled в vuetify? - PullRequest
Новая
       61

Как установить несколько условий внутри свойства: disabled в vuetify?

0 голосов
/ 28 апреля 2020

Я работаю над функцией, позволяющей пользователям загружать файлы. Мне нужно отключить кнопку «Добавить файл», когда

1) поле пусто

2) когда размер файла превышает 100 МБ

Это кнопка: 

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

Вот что находится внутри данных: 

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

Использование либо 

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

, к сожалению, не работает.

|| на самом деле выдает ошибку:

enter image description here

Как я могу убедиться, что кнопка отключена для обоих условий?

1 Ответ

1 голос
/ 28 апреля 2020

Вы можете использовать computed свойство. Это свойство будет пересчитываться каждый раз, когда uploadedFiles изменяется. 

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

И затем использовать его вот так 

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

Пример: 

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://vuejs.org/v2/guide/computed.html#Computed -Свойства

...