回る男の備忘録

どこかでプログラム書いてシャニマスして野球見てTwitterやってる人間の駄文

【Rails】Turbolinksがちょいと悪さをしていた話

そこまで大した話ではないのですが

経緯

  1. RailsプロジェクトにVueを導入
  2. Vueを画面の一部分に導入
  3. Vueを導入した画面に遷移するとVueのレンダリングがされない
  4. Vueを導入した画面にてリロードを行うことでVueがレンダリングされる

こんな感じです。

原因

Turbolinksがどうやら悪さをしていたらしいです。
一々リロードするのはアホらしいので何とかしましょう。

対策

以下の通り対応します。

link_to "遷移先ページ", hogehoge_path, data: {"turbolinks" => false}

遷移先ページはVueを仕込んだページとなります。
遷移先ページへのリンクにdata: {"turbolinks" => false}と設定することで遷移先ページについてTurbolinksが無効となります。
あくまで遷移先ページのみ無効化しているだけなので他のページでは動いているのでそこは注意。

上記はlink_toで対応しましたけどaタグでも問題なく実装できます。

<a href="hogehoge" data-turbolinks="false">

これでOKです。