Tengo múltiples formularios creados desde API. Para cada formulario, necesito verificar si el valor de las entradas cambia o no; para que pueda habilitar o deshabilitar el botón.
Entonces, traté de crear una bandera: isChanged: false , para poder hacer el botón así:
<v-btn :disabled="!isChanged" > Save </v-btn>Pero, como tengo múltiples formularios, tal vez necesito crear múltiples banderas, pero no entiendo cómo crear múltiples banderas dinámicamente para cada formulario.
Además, tengo un botón Save All que puede requerir una nueva marca como isChangedAny: false para detectar si alguno de los múltiples formularios cambió o no.
Si alguna de las entradas del formulario cambia, ese botón debe habilitarse desde deshabilitado. Pero, lo más importante, no puedo encontrar la manera de crear un método para detectar si las entradas del formulario cambian o no. ¿Cómo puedo hacer eso?
Básicamente, tiene dos opciones sobre cómo resolver esto:
@input en un campo de formulario, una vez que se dispara, establece un hasChanged en verdadero. Esta es la solución fácil, pero no funcionará si el usuario vuelve a cambiar el valor a su original, porque entonces hasChanged sigue siendo verdadero y el formulario aún se puede guardar.mounted() y compare la entrada actual con la entrada original a través de una propiedad computed . Esto funcionará mejor, pero podría ser un poco más difícil de implementar.Puede crear observadores individuales para cada formulario después de obtener los datos y almacenar la identificación de los formularios modificados:
data: () => ({ items: [], changed: [] }), mounted () { this.getData() // The following code should be run in a callback when the getData() is asynchronous. this.items.forEach((_, index) => { this.$watch(['items', index].join('.'), { deep: true, handler: (newVal, oldVal) => { this.changed.push(newVal.id) } } ); }); } Luego verifique contra la matriz changed . Si una identificación específica está en esa matriz, active el formulario. Si la longitud de la matriz changed es mayor que 0, active saveAll .
Aquí está el codepen de trabajo