Vue.js disabled button with condition doesn't work

Question

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;
        },

Boussadjra Brahim · Accepted Answer · 2021-01-11 21:11:01Z

3

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>

edited Jan 11, 2021 at 21:11

answered Jan 11, 2021 at 20:10

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js disabled button with condition doesn't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related