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
Open
@sturnclaw

Description

@sturnclaw

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    nuejs-coreRelated to nuejs-core package

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0