I need to implement a feature where a button is initially disabled and only becomes enabled when the input value is changed. To achieve this, I am using a boolean flag that is set to true by default and turns false only when the input changes. The v-model of the input is linked to an Object property.
The issue arises when the page first loads because it triggers the watch function, causing the boolean value to be set to false. This results in the button never being disabled. How can I modify the code so that the watch function only triggers when the value changes?
Here is the modified code snippet:
class GridFilters {
constructor(grid) {
this.grid = grid;
this.filterName = '';
this.buttonflag = true;
this.filterError = false;
}
}
export default {
data() {
return {
gridFilter: {},
};
},
created() {
this.gridFilter = new GridFilters(this);
},
watch: {
'gridFilter.filterName': function () {
this.gridFilter.buttonflag = false;
},
},
};
HTML
<input placeholder="Enter a name" v-model="gridFilter.filterName" ref="filterName" @keydown="gridFilter.filterError=false" />
<button @click="save()" v-bind:disabled="gridFilter.buttonflag?true:false">Save Filter</button>