JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<h2>
Vue directive for updating on blur
</h2>
<input v-model-blur="myVar" />
<br />Input: {{myVar}}
</div>
JavaScript
Vue.directive('model-blur', {
bind: function(el, binding, vnode) {
el.addEventListener('blur', function() {
vnode.context[binding.expression] = el.value;
});
}
});
new Vue({
el: '#app',
data: {
myVar: ''
}
});