Doesn't work and no way to debug


#1

Hello, I want to try Stimulus, but it just doesn’t work (no error messages, nothing). Looks like it is not loaded at all. What could be the problem?

  <%= form.fields_for :menu_items do |menu_item| %>
    <div data-controller="menu_item">
      ...
      <%= link_to t('menu.destroy'), '#', data: { action: 'menu_item#toggleDestroy', target: 'menu_item.btn' } %>
    </div>
  <% end %>

Also, my packs/admin.js:

import Rails from 'rails-ujs'
import Turbolinks from 'turbolinks'
import { Application } from 'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'

Rails.start()
Turbolinks.start()

const application = Application.start()
const context = require.context('admin_controllers', true, /.js$/)
application.load(definitionsFromContext(context))

And my admin_controllers/menu_item_controller.js:

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = [ 'btn' ]

  initialize() {
    console.log('initialize');
  }

  toggleDestroy(e) {
    e.preventDefault()
    console.log('toggleDestroy')
  }
}

#2

It seems my problem was with naming. I changed the name (both for the file and controller) from menu_item to menu-item and it helped. Frustrating.