I have the following code:
<input type="text"
@input="disableField($event.target)"
:disabled="isFieldDisabled(????)"
/>
I want to pass to the isFieldDisabled method the same value which I get in $event.target - the element reference. I cannot find the way how to do this. I know that I could use the :ref but in this case I need to do it as shown above.
This is only the example use case. I know that to disable the field I can do it better but I want to show the problem in simplest way.
This isn't possible the way you're asking for it.
disabled: Vue evaluates the properties to determine how the DOM should look and then creates the elements to match. As here:
Note that you can only access the ref after the component is mounted. If you try to access
inputin a template expression, it will benullon the first render. This is because the element doesn't exist until after the first render!
Events don't have to play by the same rules, because you're defining handlers: DOM events will come from one source and apply to one target, and absent components don't emit events. Even then, the syntax gives you access to $event, not to an $el for a direct element reference.
The most straightforward way is to use a ref to get to the object after Vue creates it, subject to the same null-on-first-render ref rules above. If you need to pass a handle into a multipurpose method in the shape of getFoo(argument) your argument may have to be a string or enum key you define, not the element itself.