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. but doesn’t work.

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

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

Answer

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

Advertisement

Answer