詳しくいうと、

今画面がこんな感じになっていて、
この画面のコードはしたのようなかんじで

mandalarts/index.html.erb


# フォームの配列をeachしたものが色々あります

<%= link_to "マインドマップ" , mindmaps_path%>

リンク先のコードはこういう感じです

mindmaps/index.html.erb


<%= javascript_pack_tag 'mindmaps'%>
<%= stylesheet_pack_tag 'mindmaps' %>

実際に表示させてるvueの画面は

maindmaps.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が表示されるようになります。

この方のエラーを見るとターボリンクスが原因とある。

application.js

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の中身はこんなの

mindmaps.vue

    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がそもそもなかった。

つまり、

mindmaps/index.html.erb


<%= javascript_pack_tag 'mindmaps'%>
<%= stylesheet_pack_tag 'mindmaps' %>

これを直接返してた。
検証ツールで確認したらscriptはあった。

このサイトの画像にある通りで

turbolinksは文字通り「HTMLをレスポンスとして返す」
といった挙動になってた。

#　遷移する前にvueが表示されるエラーについて。

mandalarts/index.html.erb


<%= 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分強奪ってしまいました。。。。。

いやーー、本当にしょうもないミスで、エンジニア様の時間を奪ってしまった。。。
デバッグするときは処理ミスの可能性を追わないで、
ケアレスミスの可能性もしっかり考えないと。。。。