💁

form_withメソッドでテキストボックスが表示ができない (EOTD No. 17)

2021/01/12に公開

どうもAmetaです。
先日から選択した商品をセッションに保持する機能と選択した商品を一括決済する機能を実装しているのですが、その中で起こったエラーをご紹介します。

本日のエラー

シチュエーション

このスクショは決済に進む前に選択した商品を一覧表示するページです。
"数量"のコラムだけに数値が表示がされていませんでした。

MVCの関連箇所は以下の通りです。

ルーティング

    line_items GET    /line_items(.:format)           line_items#index
               POST   /line_items(.:format)           line_items#create 
 new_line_item GET    /line_items/new(.:format)     line_items#new
edit_line_item GET    /line_items/:id/edit(.:format)  line_items#edit
     line_item GET    /line_items/:id(.:format)       line_items#show
               PATCH  /line_items/:id(.:format)       line_items#update
               PUT    /line_items/:id(.:format)       line_items#update
               DELETE /line_items/:id(.:format)       line_items#destroy

コントローラー

class LineIemsController < ApplicationController
  
  ...
  
  def update
    @line_item.update(quantity: params[:quantity].to_i)
    redirect_to current_cart 
  end

  def destroy
    @line_item.destroy
    redirect_to current_cart
  end
  
  ...
  
end

ビューファイル

# carts/show.html.erb

...

<div class="cart__content__something">
  <div class="dish-show-info-cart">
    <table class="cart-table">
    <thead>
      <th></th>
      <th>料理名</th>
      <th>数量</th>
      <th>小計</th>
      <th></th>
    </thead>
    <% @line_items.each do |line_item| %>
    <% dish = line_item.dish %>
    <tbody>
      <td><%= image_tag dish.image,class:"dish-box-img-cart" %></td>
      <td><%= dish.name %></td>
      <td>
      <% form_with url: line_item_path(line_item), method: :patch, local: true do |f| %>
	<%= f.number_field :quantity, placeholder: "#{line_item.quantity}", value: "#{line_item.quantity}", min: 1 %>
	<%= f.submit "変更" %>
      <% end %>
      </td>
      <td>¥<%= line_item.total_price %></td>
      <td id="cross-btn"><%= link_to image_tag("cross.png"), line_item_path(line_item), method: :delete, data: { confirm: '削除しますか?' }%></td>
    </tbody>
    <% end %>
  </table>
  </div>
  <%= link_to '注文に進む', dish_orders_path(@cart.id),class:"cart-order-btn"%>
</div>

...

form_withメソッドを使って選択した商品の数量を変更できるようにするものです。
しかし、上記の設定では"数量"のコラムにあるはずのform_withメソッドに関連するフィールドが表示されませんでした。

考察

ビューファイルの該当箇所を再確認。


<% form_with url: line_item_path(line_item), method: :patch, local: true do |f| %>
<%= f.number_field :quantity, placeholder: "#{line_item.quantity}", value: "#{line_item.quantity}", min: 1 %>
<%= f.submit "変更" %>
<% end %>

Inspectionでビューファイルの要素を確認してみました。

この後、cssでクラス名を与えてz-indexで一番上に設定してみても何も変わらず。
他の要素を代入したときは問題なく表示されたので、form_withの中身に問題がありそう。

SOTD(Summary Of The Day)

結局何が原因のエラーなのか今日判明させることはできず。。
かなりの頻度で使用しているform_withメソッドで今回のようなエラーが起きるとは思いもしませんでした。

同時にビューファイルで起こるエラーの解決が一番時間がかかる事を改めて実感。Action Viewの理解を深める必要がある。

Discussion