Conditional event handler in Vue

Bit of a quick entry to write down how to conditionally add an event handler in Vue that passes a custom argument to its handler function (in addition to the event itself).

Here's the template code.

<input v-on="active ? { input: event => handle('Test', event) } : {}" />

Here's the relevant JavaScript.

data: {
  active: true,
},
methods: {
  handle(str, event) {
    console.log(str);
    console.log(event.target.value);
  }
}

Open example page.

Home