Missing target element "toggle.show"

1

I am new to Stimulus, so please forgive me if this is a dumb question.

I want to allow users to toggle their password on my devise login form, but I am getting: Missing target element “toggle.show” on the click event?

*toggle_controller.js

import { Controller } from "stimulus";

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

password() {
 console.log(`Test, ${this.name}`);
}

get name() {
return this.showTarget.value;
}
}

*devise>sessions>new

<div class="form icons" data-controller="toggle">
<div class="login__labels">
  <%= f.label :password, t("registration_pages.login.password_label"), class: "form__label form__label--login_color form__label--position" %> 
  <span>
    <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
    <%= link_to t("registration_pages.login.password_forgot"), new_password_path(resource_name), class: "form__forgot_password form__label--position" %>
    <% end %>
  </span>
</div>   
<div class="material_icons">
 <%= f.password_field :password, placeholder: "**********", class: "form__element show_hide" %>
 <i class="material material__lock_open">lock_open</i>
 <div class="toogle__password"> 
  <span class="show" data-target="toggle.password" data-action="click->toggle#password">show</span>
 </div>
</div>
2

your target is password not show

you should either change your target name in the html to show

<span class="show" data-target="toggle.show" data-action="click->toggle#password">show</span> </div>

or in your controller

import { Controller } from "stimulus";

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

  password() {
    console.log(`Test, ${this.name}`);
  }

  get name() {
    return this.passwordTarget.value;
  }
}
3

Thank you! I knew it was something simple.

1 Like