Rails6 method: :post ができない（getになってしまう）

Question

実現したいこと

https://techtechmedia.com/favorite-function-rails/
こちらを参考にいいね機能の実装をしてます。

発生している問題・エラーメッセージ

method: :postとしているのにgetで処理されてしまう為Routing Errorとなってしまう
エラーメッセージ
ActionController::RoutingError (No route matches [GET] "/like/5"):

該当のソースコード

- if current_user.liked_by?(@spot.id)
  td
    = link_to destroy_like_path(@spot), class: "like-link", method: :delete, remote: true do
      i.fa.fa-heart.unlike-btn
    = @spot.likes.count
- else
  td
    = link_to create_like_path(@spot), class: "like-link", method: :post, remote: true do
      i.fa.fa-heart.like-btn
    = @spot.likes.count

試したこと

https://blog.ezic.info/43631.html
rails-ujs は読み込んでました。

ルーティングも確認しましたが、問題はなさそうです。
検証ツールでも確認してみましたがdata-method="post"となってました。
methodを{}で囲ってみたりもしましたが変わりませんでした。

補足情報（FW/ツールのバージョンなど）

ruby 3.0.2p107
rails (~> 6.1.4)

GitHub
https://github.com/Ryo0116/Saitamap

よろしくお願いいたします。

Comments

[shinoharat]

Github を拝見しました。
症状を聞いた感じだと、やはり rails-ujs が動作していないのではと思われます。

app/javascript/packs/application.js の7行目に

alert("webpacker!!")

--

app/javascript/application.js の7行目に

alert("importmap!!")

と追記して画面をリロードすると、どちらの alert が表示されますか？

[shinoharat]

また、ブラウザの検証ツールでどのようなHTMLが出力されているか確認し、質問文に載せてもらえると助かります。

Google Chrome の場合は [要素を右クリック]→[検証] で出ます。
他のブラウザでも、名前は違いますが似た機能があります。

おそらく以下のような出力になっていると思いますが、念のためちゃんと data-method が出ているか確認したいです。
<a href="..." data-method="...">(アイコン)</a>

[ryo1173]

遅くなりましてすみません。
追記しリロードしましたがどちらのアラートも表示されません。。。

検証ツールではこのようになってます。
<a class="like-link" data-remote="true" rel="nofollow" data-method="post" href="/like/5">

[shinoharat]

> 追記しリロードしましたがどちらのアラートも表示されません。。。

import が失敗しているのかもしれませんね。
両方の alert を1行目に移動させ、画面をリロードするとどうなりますか？

> 検証ツールではこのようになってます。

ありがとうございます。
HTMLは問題なさそうですね。

[ryo1173]

>両方の alert を1行目に移動させ、画面をリロードするとどうなりますか？

移動してみましたが変わりません・・・。

Answer 1

application.jsにimport "@hotwired/turbo-rails"」とあるので、
これを有効していると、３行目を以下のように記載すると、postメソッドが有効になります。

link_to create_like_path(@spot), class: "like-link", data: { "turbo-method": :post }, remote: true

具体的には、「method: :post」を「data: { "turbo-method": :post }」に書き換えます。

Comments

[ryo1173]

ありがとうございます。教えていただいたコードに置き換えてみたのですが、変わらずGETになってしまいました・・・。