v-slot with v-if

[madmoizo]

Version

2.6.0-beta.3

Reproduction link

https://codepen.io/frlinw/pen/zeobvd

Steps to reproduce

Click on the "click me" button

What is expected?

content should be displayed and changed on click

What is actually happening?

v-slot inside a wrapper with v-if is not displayed

[yyx990803]

The new syntax requires <template v-slot> to be at the root level inside the receiving component.

Proper usage:

<Dropdown>
  <template #title>
    <template v-if="flag">Bonjour</template>
    <template v-else>Hello</template>
  </template>
</Dropdown>

Maybe we can add a warning for this.

[madmoizo]

Will the slot syntax be removed in a future release?

[yyx990803]

@frlinw likely, but only in a major release.

[madmoizo]

Additionnally, if you put v-if/v-else on a parent, it requires a key which wasn't necessary with the good old slot.
https://codepen.io/frlinw/pen/zeobvd

[Austio]

@yyx990803 I think this will prevent conditional rendering of slots.

  <vg-apollo-query
    :query="query"
    :variables="variables"
    :prefetch="prefetch"
    v-on="$listeners"
  >
    <template #default="{ result: { data, error }, isLoading, gqlError }">
      <template
        v-if="isLoading"
        #initialLoading
      >
        <div data-test-initial-loading class="spinner-icon" />
      </template>
  </vg-apollo-query>