携帯にいつのまにか書いた2018年の目標に週1でブログを更新するという項目があったため今週も書きました(使命感)最近技術記事書いてなかったし、ちょうど苦しめられたことがあったので備忘録をば概要vue-routerを使ってSPAチックなWebアプリを開発していて、コンポーネント内にmathjaxで数式を変換して表示するような箇所がありましたがvue-routerでコンポーネントをレンダリングした箇所が数式を変換していないという問題が発生しました。普通に画面遷移で作っていたときは変換されていたので完全に見落としてました。devいい感じに表示されます。vue-routerを使ってクライアントサイドルーティングを実装する。コンポーネントを二つ作ってみる。src/components配下にFormula1.vueとFormula2.vueを作成します。</div></template><script></script>Formula2は適当に数式を変えて作成してください。コンポーネントを作成したらrouterの設定を行います。]})とりあえず/formula1、/formula2というルーティングを作成して、リンクをクリックしたらそれぞれのコンポーネントを表示するようにします。src/App.vueを以下のように書き換えます。</div></template>vue-routerの書き方に沿ってリンクとコンポーネントの表示場所を作成します。数式1をクリックしてみると。mathjaxが効いていない!!!/(^O^)\ナンテコッタ普通に画面をレンダリングした時には効いていたのに、一体なんなのかと。},}これで表示されるんとちゃいます?と数式1をクリックしたら数式が表示されました。mathjaxを利用しつつvue-routerを使う場合は数式が入ってくるであろうvueコンポーネントのmountedのタイミングでmathjaxを読み込ませる必要があるようです。createdのタイミングでは変換されず。mathjaxとvue-routerを掛け合わせる時にはまっている人がいたら参考にどうぞ。今回のソースコードも一応上げておきます。https://github.com/kimuray/sandbox-vue-router-mathjax最後にこれ実際に仕事ではめられた悲しみなんですが、仕事でやっていたときはmountedで読み込ませるだけでもダメで、createdのタイミングでも読み込ませるという二段構えをしないと数式が変換されませんでした。Rails(しかも変換箇所はマークダウンで記載されている)みたいな感じだったのが何か影響していたのかなあ。mountedにmathjax設定しても動かない場合はcreatedにもmountedと同じ記載をすれば動くかもしれないのでおためしあれ。16:50【Vue.js】vue-routerとmathjaxを掛け合わせてみたら数式が変換されていなかった話Tweet関連記事2019-01-08Railsでソーシャルログインを作る(Yahoo編)あけましておめでとうございます。LambdaでSinatraを動かしてみる12月から晴れてWebエンジニアになりました。いうことでアウ...2018-06-15【Rails】Webpackerを導入してモダンなJavaScriptをRailsで使う今回はWebpackerの導入について書いていきます。いうことで今...2018-04-08【Vue】Vue.Draggableを使ってサクッとTrelloっぽいものを作るお久しぶりです。LambdaでSinatraを動かしてみるプログラミングスクール勤めのエンジニアが転職するってよ月別アーカイブはてなブログをはじめよう!kimurayspさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。