如何在 vuetify 的 :disabled 属性中设置多个条件？答案

【问题标题】：How to set multiple conditions inside of the :disabled property in vuetify?如何在 vuetify 的 :disabled 属性中设置多个条件？
【发布时间】：2020-04-28 20:13:58
【问题描述】：

我正在开发一项允许用户上传文件的功能。我需要禁用“添加文件”按钮

1) 该字段为空

2) 当文件大小超过 100MB 时

这是按钮：

<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"

很遗憾没用。

||实际上会产生错误：

如何确保按钮在这两种情况下都被禁用？

【问题讨论】：

标签： javascript validation vue.js file-upload vuetify.js

【解决方案1】：

您可以使用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-Properties

【讨论】：