ruby-on-rails Rails Stimulus两个数据目标

nfeuvbwi  于 12个月前  发布在  Ruby
关注(0)|答案(1)|浏览(154)

所以我正在试验和学习Rails Stimulus,我想实现的想法是我有两个模态表单(一个用于登录,第二个用于注册)我的观点:

<div data-controller="modal">

  <button data-action="click->modal#login" data-target="loginForm" class="flex items-center">
   Login
  </button>

  <div data-modal-target="loginForm" class="relative z-10 hidden">
    <%= render 'layouts/modal_login' %>
  </div>

  <div data-modal-target="registerForm" class="relative z-10 hidden">
    <%= render 'layouts/modal_register' %>
  </div>

</div>

字符串
在login和register partials中,我想添加一个按钮来在modal_login中的modal表单之间切换:

<button data-action="click->modal#register" class="flex items-center">
  Register
</button>


我的stimulus modal_controller.js:

export default class extends Controller {
  static targets = ['loginForm', 'registerForm'];

  login() {
    console.log("login");
    this.loginFormTarget.classList.toggle("hidden");
  }

  register() {
    console.log("register");
    this.loginFormTarget.classList.toggle('hidden');
    this.registerFormTarget.classList.toggle('hidden');
  }
}


问题
1.这是否一个好的做法呢?
1.为什么当我试图从登录部分调用数据操作注册时,我得到:

Error invoking action "click->modal#register"

Error: Missing target element "registerForm" for "modal" controller


我希望当我按下注册按钮时,登录模式将隐藏,注册模式表单将显示

xeufq47z

xeufq47z1#

基本上你的方法应该工作.我建议如下:

<button data-action="click->modal#login" data-target="loginForm" class="flex items-center">
   Login
</button>

字符串
-->你应该省略“data-target=“loginForm”"。我想这是一个误解。Data-Target不是动作的目标(你想切换loginForm),而只是元素的标识符(在本例中是按钮)。
也许你有第二个registerForm-Target在你的partials中-请检查并删除。
其次,你应该像这样为你的JS-Methods添加一个参数:

login(event) {
   ...   
}

register(event) {
    ...
}


首先,我建议添加一个connect-Method来确保控制器正确加载:

connect(){
  console.log("Controller connected")
}

相关问题