vue 日本語入力 input model binding

v-jp-model

// japanese input
var vCompositionModelUpdate = function (el, binding, vnode) {
  vnode.context[binding.expression] = el.value
}

Vue.directive('jp-model', {
  bind: function (el, binding, vnode) {
    el.value = binding.value

    el.addEventListener('keyup', vCompositionModelUpdate.bind(this, el, binding, vnode))
    el.addEventListener('compositionend', vCompositionModelUpdate.bind(this, el, binding, vnode))
  },
  update: function (el, binding) {
    el.value = binding.value
  }
})

usage

<input v-jp-model="searchText">

binding.valueは v-jp-model="ここのvalue"が渡される。
もし、formatted inputがほしい場合はこの方法は聞かない