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

Question

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

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"

不幸的是不起作用。

|| 实际上会产生一个错误：

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

Answer 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://v2.vuejs.org/v2/guide/compulated.html#Compulated-Properties