Using bracket notation to assign $event to an object in a component event handler generates a render warning and does not execute handler
Jul 9th 2021
Version
3.1.4
Reproduction link
Steps to reproduce
- Type text into input field
What is expected?
Typed input should appear at the bottom.
What is actually happening?
Warning Property "$event" was accessed during render but is not defined on instance. appears and typing in the input field does nothing.
Only happens with bracket notation (state['text']).
Dot notation works as expected (state.text).
Adding a semicolon at the start of the handler also seems to work (;state['text'] = $event)
You can select working options from the dropdown.
Jul 9th 2021
Another workaround is to use a function:
<Input v-if="mode === 'broken'" :modelValue="state.text" @update:modelValue="e => state['text'] = e" />