所以我正在试验和学习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
型
我希望当我按下注册按钮时,登录模式将隐藏,注册模式表单将显示
1条答案
按热度按时间xeufq47z1#
基本上你的方法应该工作.我建议如下:
字符串
-->你应该省略“data-target=“loginForm”"。我想这是一个误解。Data-Target不是动作的目标(你想切换loginForm),而只是元素的标识符(在本例中是按钮)。
也许你有第二个registerForm-Target在你的partials中-请检查并删除。
其次,你应该像这样为你的JS-Methods添加一个参数:
型
首先,我建议添加一个connect-Method来确保控制器正确加载:
型