Rails 7中Stimulus复选框脚本无法正常工作求助

以下是导致功能失效的核心问题及对应的修复方案：

1. 复选框状态读取错误 #

Stimulus控制器中使用this.completedTarget.completed获取复选框状态是错误的——复选框的选中状态对应的属性是checked，而非completed，这会导致传递给后端的值为undefined，无法触发模型更新。

2. FormData参数名错误 #

formData.append("@order[complete]", ...)中的@是多余的，Rails期望的参数格式为order[complete]，带@会导致参数无法被强参数解析，后端无法识别并更新模型。

3. CSRF Token获取函数未定义 #

代码中的getMetaValue函数未实现，Rails 7中可直接通过DOM选择器获取CSRF Token：document.querySelector('meta[name="csrf-token"]').content

4. Fetch配置无效参数 #

dataType: 'script'是jQuery Ajax的专属参数，Fetch API不支持该配置，需直接移除。

5. 响应处理逻辑错误 #

• Rails的update动作默认返回200状态码（而非204），除非手动指定head :no_content，原代码中判断response.status != 204会错误触发回滚操作
• 回滚复选框状态时使用event.target.complete，同样应改为checked属性

修复后的完整代码 #

1. show.html.erb（可简化勾选判断） #

<tr data-controller="todo" data-todo-update-url="<%= order_path(@order.id) %>">
  <td>
    <div>
      <input type="checkbox" 
             data-action="todo#toggle" 
             data-target="todo.completed" 
             <%= checked(@order.complete) %>>
    </div>
  </td>
</tr>

注：使用Rails内置的checked helper可简化勾选判断，效果与原代码一致

2. Stimulus todo_controller.js 修复版 #

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "completed" ]

  toggle(event) {
    const isChecked = this.completedTarget.checked;
    let formData = new FormData();
    formData.append("order[complete]", isChecked);

    fetch(this.data.get("update-url"), {
      body: formData,
      method: 'PATCH',
      credentials: "include",
      headers: {
        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
      }
    })
    .then(response => {
      // 检查请求是否成功（2xx状态码）
      if (!response.ok) {
        // 回滚复选框状态
        this.completedTarget.checked = !isChecked;
        // 可选：打印错误信息便于调试
        return response.text().then(text => { throw new Error(text) });
      }
    })
    .catch(error => {
      console.error("更新失败:", error);
    });
  }
}

后端控制器额外检查 #

确保OrdersController的update动作允许complete参数：

class OrdersController < ApplicationController
  # ...
  def update
    @order = Order.find(params[:id])
    if @order.update(order_params)
      head :no_content # 返回204状态码，便于前端判断
    else
      render :show, status: :unprocessable_entity
    end
  end

  private
  def order_params
    params.require(:order).permit(:complete) # 必须包含complete参数
  end
end

调试建议 #

若仍有问题，可通过浏览器开发者工具排查：

• Network标签：查看PATCH请求是否发送，检查请求参数、响应状态及内容
• Console标签：查看是否有JavaScript报错

内容的提问来源于stack exchange，提问作者Jack Aubone