Dynamic event listener

I have some form data represented as an array of objects that I’m iterating over in my template. I would like to be able to create an event listener dynamically based of some property in a field’s config object. Suppose a single field was represented like so:

{
  code: 'someFieldCode',
  label: 'Some Field',
  type: 'input',
  event: 'blur',
  ...
}

where the “event” property could be “input”, “blur”, “change”, etc.

I noticed that something like this is possible as of 2.6.0.

However, in my template when iterating of this array, I’m unable to access field.event like this:

<input
  :id="field.code"
  :value="field.value"
  @[field.event]="someMethod(field.code, $event)"
/>

Is something like this possible?

The best thing you can do for us to help you is to provide all the code involved - even better, a Codepen or JSFiddle recreating the issue.

But yes, what you want to achieve is certainly possible: https://jsfiddle.net/jamesbrndwgn/3z6x1f8s/1/

This is exactly the use case I was looking for. Thanks for that! Seems like the reason I was running into issues was because of some linting rules.

I end up with two linting issues:

If I use <!-- eslint-disable -->, it removes the second error but the first persists. Sorry, I know this has gotten a bit off topic, but if you have any ideas what the issue could be, I’d love to hear them.