JSFiddle - React, Tailwind, and code Playground
HTML
<div id="app">
<input
v-for="item in items"
v-model="item.name"
v-input-test="item.name"
>
</div>
Babel + JSX
function getKey(e) {
console.log('key:', e.key);
console.log('el:', this);
console.log('binding:', this.binding);
}
Vue.directive('input-test', {
bind(el, binding) {
el.binding = binding;
el.addEventListener('keydown', getKey);
},
unbind(el, binding) {
el.removeEventListener('keydown', getKey);
},
});
new Vue({
el: '#app',
data: {
items: [
{ name: 'Iron Man' },
{ name: 'Thor' },
{ name: 'Hulk' },
],
},
});