Rails hotwire-stimulus 的三级关联 form.select 的疑问

syutran · December 07, 2021 · Last by jicheng1014 replied at December 07, 2021 · 417 hits

hotwire-stimulus 的三级关联 form.select 的 change 不级联

我用 hotwire 做了个三级关联 form-select,第一个 select 点选后,第二个 select 是随第一个内容变动,但是第三个 select 却不随第二个 select 的变动而变动。需要用鼠标点选第二个并有所改变,第三个才会响应。看样子 stimuluscontroller action 中的 change 有问题,用鼠标 change 的算 change,用代码 change 的不算 change。

上代码

# manager_controller.js

import { Controller } from "@hotwired/stimulus"
import {get } from "@rails/request.js"

export default class extends Controller {
    static targets = ["branchSelect", "roleSelect"]

    change(event) {
        let manager = event.target.selectedOptions[0].value
        let target = this.branchSelectTarget.id
        get(`/separations/manager_branches?target=${target}&manager=${manager}`, {
            responseKind: "turbo-stream"
        })
    }
    changebranch(event) {
        let manager = event.target.selectedOptions[0].value
        console.log("你到底动还是不动?")
    }
}
= form_with(model: @ngcms_rbac_user_url, local: true) do |form|
  %div{"data-controller" => "manager"}
    .row.mb-4
      .col-4
        = form.select :manager, NgcmsRbacUser.all.map {|u| [u.name+u.id,u.id]}, { prompt: "select a manager"},{ class: "form-select", data: { action: "change->manager#change".html_safe}}
    .row.mb-4
      .col-4
        = form.select :branch, [],{ prompt: "请选择单位"},{ class: "form-select", data: { manager_target: "branchSelect", action: "change->manager#changebranch".html_safe}}
    .row.mb-4
      .col-4
        = form.select :role, [], { prompt: "请选择岗位"}, { class: "form-select", data: { branch_target: "roleSelect"}}
    .row
      .col
        = form.submit

业务场景

某客户经理,在不同的分支机构都有不同的业务(业务中的角色也不同,A 岗,B 岗,管理岗等等),目标是把这个客户经理的在某个机构的部分业务转让给另一个客户经理,所以,先选择 客户经理,根据客户经理所在的某个分支机构,再选要转让的角色。

这是用 turbo stream 替换了第二个 select?那它是被替换了,select 的值没有 change 啊。

可以使用 tubro_stream 在第一级更新的时候 直接 stream.update 二级和三级 select

You need to Sign in before reply, if you don't have an account, please Sign up first.