Thanks to visit codestin.com
Credit goes to github.com

Skip to content

how to add outlets to nested folders #672

@pqvel

Description

@pqvel

i have 2 controllers which are on the path controllers/create_controller.js and controllers/app/todos_controller.js. How can I add outlet todos for the create controller?
my HTML:
image

create_controller.js:
`import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
static targets = ["todoText"]
static outlets = ["todos"]

createTodo(e) {
e.preventDefault()
this.todosOutlet.addTodo(this.todoTextTarget.value)
this.todoTextTarget.value = ""
}
}
_app/todos_controller.js:_import { Controller } from "@hotwired/stimulus"
import { v4 as uuid } from 'uuid'

export default class extends Controller {
static targets = ["todos"]
static values = { todos: Array }

initialize() {
this.todos = []
}

addTodo(todo) {
this.todos.push({
todo,
id: uuid(),
active: false
})
this.renderTodos()
}

renderTodos() {
let todos = ''
this.todos.forEach(todo => {
todos += <li class="${todo.active ? 'active' : ''}"> <p>${todo.todo}</p> <input data-action="todos#changeActiveTodo" data-todos-id-param="${todo.id}" type="checkbox" value="${todo.active}" > </li>
})
this.todosTarget.innerHTML = todos
}
}
`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions