Tengo el siguiente código:
<input type="text" @input="disableField($event.target)" :disabled="isFieldDisabled(????)" />Quiero pasar al método isFieldDisabled el mismo valor que obtengo en $event.target: la referencia del elemento. No puedo encontrar la manera de cómo hacer esto. Sé que podría usar :ref pero en este caso necesito hacerlo como se muestra arriba.
Este es solo el caso de uso de ejemplo. Sé que para deshabilitar el campo puedo hacerlo mejor, pero quiero mostrar el problema de la manera más simple.
Esto no es posible de la forma en que lo pides.
disabled : Vue evalúa las propiedades para determinar cómo debe verse el DOM y luego crea los elementos para que coincidan. Como aquí :Tenga en cuenta que solo puede acceder a la referencia después de montar el componente . Si intenta acceder a
inputen una expresión de plantilla, seránullen el primer procesamiento. ¡Esto se debe a que el elemento no existe hasta después del primer renderizado!
Los eventos no tienen que seguir las mismas reglas, porque está definiendo controladores: los eventos DOM provendrán de una fuente y se aplicarán a un destino, y los componentes ausentes no emiten eventos. Incluso entonces, la sintaxis le da acceso a $event , no a $el para una referencia directa a un elemento.
La forma más sencilla es usar una ref para llegar al objeto después de que Vue lo cree, sujeto a las mismas reglas de ref nulas en la primera representación anteriores. Si necesita pasar un controlador a un método multipropósito con la forma de getFoo(argument) , es posible que su argumento deba ser una cadena o una clave de enumeración que defina, no el elemento en sí.