Subscribe on changes!

Same directive on sibling elements does not create `el` for all siblings

avatar
Jun 29th 2023

Vue version

3.3.4

Link to minimal reproduction

https://github.com/Ericlm/vue-test-directive

Steps to reproduce

  • Create a new Vue Project (with TS, eslint and prettier)
  • Adding a "test" directive which creates an HTMLElement and renders it to the parentElement (to append to it) (render(node, el.parentElement!) at the end of the directive)
  • Creating two or more nodes with the same directive, but only one HTMLElement will be rendered

What is expected?

To have as much HTMLElement appended to the parent as there are calls to the directive.

What is actually happening?

There is only one HTMLElement appended to the parentElement while there are multiple uses or the directive.

System Info

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1
    Memory: 236.13 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.0 - ~/.asdf/installs/nodejs/18.14.0/bin/node
    npm: 9.3.1 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 114.0.5735.198
    Firefox: 114.0.2
    Safari: 16.5.1
    Safari Technology Preview: 17.0
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

At first I wanted to create a directive to show a tooltip above an element (using floating-ui), and to do this, I appended the tooltip to the parentElement. But I ran into this issue when I used the directive on two siblings elements.