【Vue.js + TypeScript】autonakaでフリガナを自動的に別フィールドに入力させる

はじめに

• Vue.js + TypeScriptを使い、ユーザー名入力フォームなどで日本語入力をした際に、自動で別フィールドにふりがなorフリガナを入力できるようにしました。

実装コード

<template lang="pug">
label 氏名
input#last_name(name='last_name' type="text" placeholder="山田" @input="handleLastNameInput")
input#first_name(name='first_name' type="text" placeholder="一郎" @input="handleFirstNameInput")

label フリガナ
input#last_name_furigana(name='last_name_furigana' type="text" placeholder="ヤマダ")
input#first_name_furigana(name='first_name_furigana' type="text" placeholder="イチロウ")
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import * as AutoKana from 'vanilla-autokana';

let autokanaLastName: any;
let autokanaFirstName: any;

@Component
export default class Hoge extends Vue {
  @Prop() userInfo!: {
    first_name: string,
    last_name: string,
    first_name_furigana: string,
    last_name_furigana: string
  };

  mounted() {
    autokanaLastName = AutoKana.bind('#last_name', '#last_name_furigana', { katakana: true });
    autokanaFirstName = AutoKana.bind('#first_name', '#first_name_furigana', { katakana: true });
  }

  handleFirstNameInput() {
    this.userInfo.first_name_furigana = autokanaFirstName.getFurigana();
  };
  handleLastNameInput() {
    this.userInfo.last_name_furigana = autokanaLastName.getFurigana();
  };
}
</script>

<style lang="scss">
</style>