8000 name / ref attributes and `this.$refs` don't work inside `:for` loops · Issue #558 · nuejs/nue · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

name / ref attributes and this.$refs don't work inside :for loops #558

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
sturnclaw opened this issue Apr 22, 2025 · 0 comments
Open

name / ref attributes and this.$refs don't work inside :for loops #558

sturnclaw opened this issue Apr 22, 2025 · 0 comments
Labels
nuejs-core Related to nuejs-core package

Comments

@sturnclaw
Copy link

Describe the Bug

When using the :for attribute feature of Nue, elements inside a for loop with the ref/name attribute are not properly registered to the component's this.$refs value, leading to the parent component's this.$refs value missing any dynamically-generated named elements regardless of whether the element is a custom component or a standard HTML tag.

Additionally, the value of this passed to event handlers inside elements instantiated within a :for loop is different from the value of this for elements in the rest of the component, and instead the component must be accessed via a special-case lookup to this.$parent.

See the attached example and screenshot - for context, the output log was generated by clicking each of the buttons once in left-to-right order.

It is very non-obvious that there is an implicit "component boundary" at the for-loop - I'd expect the same this to be passed to handlers and functions regardless of whether they were generated with a for-loop or not.

Environment

OS: Linux
Nuekit version: 1.0.0-RC3

Minimal Reproduction

<div @name="bugtest">
    <div name="test1">
        <button :for="name in items" name="{name}" @click="test">{name}
            <span name="test_{name}"></span>
        </button>
        <button @click="test" name="test2">Test Me</button>
    </div>

    <script>
        items = [ "a", "b", "c" ]
        test(e) { console.log(this.$refs) }
    </script>
</div>

Image
@nobkd nobkd added the nuejs-core Related to nuejs-core package label Apr 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
nuejs-core Related to nuejs-core package
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sturnclaw @nobkd
0