Skip to content

Custom directive passed through a slot with v-else isn't unbound on vm.$destroy #2206

@mzgajner

Description

@mzgajner

Apologies for the long title, here's a JSFiddle.

Here are the steps to reproduce it, JSFiddle references in brackets:

  • Create a component with a slot that has a v-else directive on it (MyWrapper).
  • Create another component that imports/uses the first one (MyComponent).
  • In the second component, create a custom directive with bind/unbind functions (myDirective).
  • In the template of the second component, use the first component (wrapper) and insert an element with the custom directive inside it so it gets rendered in place of the slot.
  • Call vm.$destroy() on your instance. This should call unbind on the custom directive, but it doesn't.

If you remove v-else from the slot in MyWrapper, everything works as expected. My current workaround is simply replacing

<div v-if="someExpression"></div>
<slot v-else></slot>

with

<div v-if="someExpression"></div>
<slot v-if="!someExpression"></slot>

Tested with latest (1.0.15) version.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions