Vuejs にてhtmlタグのlangプロパティの値を切り替える方法

本文の言語に合わせて、htmlのlangプロパティの値も変更しなきゃ！と思った時

Vuejsで複数の言語に対応したサイトを開発しているところで、本文の言語が切り替わる際に、合わせてhtmlタグのlangも変更しなきゃとふと思った方もいると思う。だが、htmlタグはapp/public/index.htmlにあって、どうすればと思うだろう。その方々に方法を共有します。

＊ちなみにlangプロパティの値を変更しなくても特に影響や問題は無いらしい。
しかし、htmlのlangと本文の言語が違う（例：lang='ja'だが、本文内容：Qiita is very goodのように英語）ことにより、ブラウザで「このページを翻訳しますか？」と聞かれる時があるので、langを変更しておくのは良いとのこと。

環境の整理

• 開発環境：Vuejs
• 多言語対応のためのプラグイン：Vue i18n
• 今回例で見せる多言語は３つ：
  　日本語：lang = 'jp',
  　英語　：lang = 'en',
  　韓国語：lang = 'ko',

方法

1. App.vueを開いて、watch オプションを使用しよう。
2. 'i18n.locale'をモニタリングし、切り替わった言語を取得する。
3. handler内で直接コードを書いても構わないが、今回はsetHTMLlangというメソッドを作る。
4. setHTMLlang内にて、言語（=value変数）を判定し、
   document.get...で取得したhtmlのlangプロパティの値に、jp, en, koをそれぞれ付与する。

完成コード

App.vue

export default {
  name: 'App',
  watch: {
    '$i18n.locale': {
      handler (value) {
        this.setHTMLlang(value)
      }
    }
  },
  methods: {
    setHTMLlang (value) {
      if (value === 'jp') {
        document.getElementsByTagName('html')[0].lang = 'jp'
      } else if (value === 'en') {
        document.getElementsByTagName('html')[0].lang = 'en'
      } else if (value === 'kr') {
        document.getElementsByTagName('html')[0].lang = 'ko'
      }
    }
  }
}

＊今回はVuejs環境下での実例だったが、
watchオプションのような機能（モニタリング）が備わっていて、javascriptが使用できる環境下では少しコードを変更し応用できると思う。