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
JavaScript
x
15
15
1
<v-data-table :headers="headersAllStep3" :items="step2" :search="searchAllStep3">
2
<template v-slot:item="row">
3
<tr>
4
<td>{{ row.item.produto }}</td>
5
<td>{{ row.item.descricao }}</td>
6
<td>{{ row.item.ncm }}</td>
7
<td><input type="number" v-model="row.item.quantidade" autofocus></td>
8
</tr>
9
</template>
10
</v-data-table>
11
12
<v-btn :disabled="isDisableQuantidade()">
13
Continue
14
</v-btn>
15
Javascript method in vue.js component
JavaScript
1
4
1
isDisableQuantidade(){
2
return this.step2.quantidade.length == false;
3
},
4
Advertisement
Answer
The function :
JavaScript
1
4
1
isDisableQuantidade(){
2
return this.step2.some(step=>step.quantidade==0);
3
},
4
should be a computed property and it must be used without ()
like :
JavaScript
1
4
1
<v-btn :disabled="isDisableQuantidade">
2
Continue
3
</v-btn>
4