Quiero deshabilitar un botón de forma predeterminada y habilitarlo solo cuando se cambia el valor de entrada.
Por lo tanto, estoy usando un indicador booleano que es verdadero de forma predeterminada y se establece en falso solo cuando cambia la entrada. El modelo v de entrada está vinculado a una propiedad de objeto.
El problema es que cuando la página se carga por primera vez, activa la propiedad del reloj y el valor booleano se establece en falso. por lo tanto, el botón nunca está deshabilitado. ¿Cómo puedo hacer que el reloj se active solo cuando se cambia el valor?
A continuación se muestra el código -
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>Una solución es ignorar el cambio si el valor anterior no está undefined . El controlador de vigilancia recibe el valor nuevo y el valor anterior como su primer y segundo argumento, respectivamente:
export default { watch: { 'gridFilter.filterName': function (newVal, oldVal) { if (oldVal === undefined) { return } this.gridFilter.buttonflag = false }, }, } Como alternativa, podría mejorar la UX configurando gridFilter.buttonflag en true cuando el nuevo valor de gridFilter.filterName esté vacío. De esa forma, si el usuario decide borrar la entrada, el botón se vuelve a desactivar:
export default { watch: { 'gridFilter.filterName': function (newVal) { this.gridFilter.buttonflag = !newVal }, }, }Creo que no necesitas a ese vigilante para nada. Puede usar el valor de gridFilter.filterName directamente en el botón, como:
<button … :disabled=“gridFilter.filterName === ''”> Entonces, si filterName es una cadena vacía, como lo configuró inicialmente, el botón se desactivará.