简体   繁体   English

Vue.js 禁用状态的按钮不起作用

[英]Vue.js disabled button with condition doesn't work

I have a data-table in Vue.js component using Vuetify with a input inside a row, and I need to disable a button if the input v-model="row.item.quantidade" was empty.我在Vue.js组件中有一个数据表,使用Vuetify并在一行内输入,如果输入v-model="row.item.quantidade"为空,我需要禁用按钮。 but doesn't work.但不起作用。

HTML HTML

                     <v-data-table :headers="headersAllStep3" :items="step2" :search="searchAllStep3">
                        <template v-slot:item="row">
                          <tr>
                           <td>{{ row.item.produto }}</td>
                           <td>{{ row.item.descricao }}</td>
                           <td>{{ row.item.ncm }}</td>
                           <td><input type="number" v-model="row.item.quantidade"  autofocus></td>
                          </tr>
                        </template>
                      </v-data-table>

           <v-btn :disabled="isDisableQuantidade()">
            Continue
           </v-btn>

Javascript method in vue.js component vue.js 组件中的 Javascript 方法

isDisableQuantidade(){
          return this.step2.quantidade.length == false;
        },

The function: function:

isDisableQuantidade(){
          return this.step2.some(step=>step.quantidade==0);
        },

should be a computed property and it must be used without () like:应该是一个计算属性,并且必须在没有()的情况下使用,例如:

 <v-btn :disabled="isDisableQuantidade">
        Continue
  </v-btn>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM