詳しくいうと、
今画面がこんな感じになっていて、
この画面のコードはしたのようなかんじで
# フォームの配列をeachしたものが色々あります
<%= link_to "マインドマップ" , mindmaps_path%>
リンク先のコードはこういう感じです
<%= javascript_pack_tag 'mindmaps'%>
<%= stylesheet_pack_tag 'mindmaps' %>
実際に表示させてるvueの画面は
<template>
<body>
<div v-for="mindmap in mindmaps">
<div
@mousedown="dragStart"
@mousemove="draggingMethod"
@mouseup="dragEnd"
:style = "{styles}"
>
<input class="mindmap-text">{{mindmap.text}}
</div>
<div id="mindmapNav">
<button @click="addMindmap">マインドマップを追加</button>
</div>
</div>
</body>
</template>
とあり、
なぜかvueの画面が、 mandalarts/index.html.erbに表示されてしまっています。
またこの方のエラーと同様に、link_to経由でmindmaps/index.html.erbを表示させたら
mindmaps/index.html.erbのなかにある、vueファイルが表示されなくなってしまいました。
なぜかリロードするとvueが表示されるようになります。
この方のエラーを見るとターボリンクスが原因とある。
import Rails from "@rails/ujs"
//import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
//Turbolinks.start()
ActiveStorage.start()
こんな漢字でturbolinksをコメントアウトしてみる
以前、上手く言ってたrailsとvueのgitをみたら、コメントアウトしてたので、
今のアプリもコメントアウトしてみる
確かに遷移したらvueが表示されるようになったが、
画像のように遷移する前にvueが表示されてしまっている。
そもそもturbolinksとは
このサイトの画像にある、
3のHTMLをレスポンスとして返すってときに、
mountedメソッドが発火してないのに、
htmlを返してしまってるのかもしれません。
ちなみにmountedの中身はこんなの
mounted(){
this.setMindmaps();
},
methods: {
addMindmap: function(){
this.mindmaps.push({text: ''})
},
setMindmaps: function(){
axios.get('/api/mindmaps')
.then(response=>(
this.mindmaps = response.data
))
と思ったが、
検証ツールで、
http://localhost:3000/mindmaps
(<%= link_to "マインドマップ" , mindmaps_path%>の遷移先)
をみてみると
mindmaps.vueのtemplateの中のHTMLがそもそもなかった。
つまり、
<%= javascript_pack_tag 'mindmaps'%>
<%= stylesheet_pack_tag 'mindmaps' %>
これを直接返してた。
検証ツールで確認したらscriptはあった。
このサイトの画像にある通りで
turbolinksは文字通り「HTMLをレスポンスとして返す」
といった挙動になってた。
# 遷移する前にvueが表示されるエラーについて。
<%= javascript_pack_tag 'mindmaps'%>
<table class="mandalart-table">
<tr>
<% @mandalarts[0..2].each do |mandalart| %>
<td>
<div class="mandalart-text">
<%= mandalart.text%>
</div>
<%= link_to "記入", edit_mandalart_path(mandalart.id)%>
</td>
<% end %>
</tr>
<tr>
<% @mandalarts[3..5].each do |mandalart| %>
<td>
<div class="mandalart-text">
<%= mandalart.text%>
</div>
<%= link_to "記入", edit_mandalart_path(mandalart.id)%>
</td>
<% end %>
</tr>
<tr>
<% @mandalarts[6..8].each do |mandalart| %>
<td>
<div class="mandalart-text">
<%= mandalart.text%>
</div>
<%= link_to "記入", edit_mandalart_path(mandalart.id)%>
</td>
<% end %>
</tr>
</table>
<%= link_to "マインドマップ" , mindmaps_path%>
みなさまはお気づきだろうか、、、、。。
そう、一番最上部に
<%= javascript_pack_tag 'mindmaps'%>
これが表示させてあった、、、。。
このエラーを解決するために、
マネーフォワードのエンジニアの方、実務経験バリバリある転職活動中
のエンジニアの方の時間を30分強奪ってしまいました。。。。。
いやーー、本当にしょうもないミスで、エンジニア様の時間を奪ってしまった。。。
デバッグするときは処理ミスの可能性を追わないで、
ケアレスミスの可能性もしっかり考えないと。。。。