2019/01/26 追記

当初は、これで満足をしていましたが、iPhoneでの入力に問題があることがわかりました。
フォームのふりがなを自動入力する vanilla-autokanaですと、iPhoneでも入力不具合がでませんでしたので、活用させていただいています。

はじめに

アカウントの登録画面を作っていると、名前とふりがなの入力欄がでてきます。
スマホ全盛の時代なので、ふりがななんて入力が面倒なので省かれたりもします。

しかし、偉大なる先人が作られた
jQuery.autokana　～　https://github.com/harisenbon/autokana
があるので、

「ふりがな」は自動で入るでしょ！

って要望も多くいただきます。

さて、jQueryで作っていたときは、そのままサクッと使わせていただいていました。
ほんとに感謝です。

しかし、Vue.jsで作るようになって、困りました。。。。汗

そして検索しまくってたどり着いたのがこちら。。。
http://sui.hateblo.jp/entry/2015/03/30/082621

React向けの記事ですが、ReactもVue.jsも大きく見れば一緒でしょ！
ってことで使ってみました(笑)

せっかちな人向け

簡単なデモとサンプルは以下にありますので、ソースを見てもらればすぐわかると思います。

デモ画面： https://idani.github.io/vue-autokana/
ソース： https://github.com/idani/vue-autokana-sample

ソース解説？

Vueプロジェクトのテンプレ作成

# vue init webpack xxxxx

historykanaの導入

# npm i historykana --save

vueファイル

ソースをまんま貼り付けますが、こんな感じです。

helloworld.vue

<template>
  <div class="hello">
    漢字：<input type="text" v-model="name" v-on:input="update_furigana">
    ふりがな：<input type="text" v-model="furigana">
  </div>
</template>

<script>
import historykana from 'historykana'
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: '',
      furigana: '',
      history: []
    }
  },
  methods: {
    update_furigana (input) {
      this.history.push(input.target.value)
      this.furigana = historykana(this.history)
    }
  }
}
</script>

hisotrykanaに渡すための入力ヒストリ配列として、「history」があります。
「漢字」と書いてあるInput欄に入力イベントが発生するたびに、v-onで定義した、「update_furigana」メソッドが呼び出されます。

「update_furigana」メソッドの引数の「input」は、v-on側には書いていませんが、$event(イベントオブジェクト)が来ています。

Vue.jsの特性なのか、「update_furigana」メソッドは入力中の確定前も呼び出されますが、v-modelで設定している「this.name」には、確定前の文字が入ってきません。

このためinputと定義しているイベントオブジェクトから入力確定前の文字を取得して、historyに入れています。

そして、historykanaを使ってフリガナを抽出しています。

まとめ

こんな感じで、Vue.jsでも簡単にフリガナの自動入力ができるようになりました。
先人のソースに感謝です。

Vue.jsで自動カナ入力する。 autokanaの導入で奮闘してみた。