2

Can I not do something like this?

<template v-if="options.columns">
  one thing...
</template>
<template v-else slot-scope="scope">
  something else. scope doesn't work here. :(
</template>

When I try to do this, scope becomes undefined. The moment I remove v-if, else and use scope it works as expected.

3
  • 1
    You should check if else condition in the inner scope of slot-scope ... Dec 2, 2019 at 7:32
  • I got to try that out but it sounds a little messier and hacky?! Dec 2, 2019 at 7:45
  • Why not just two v-if's ? Dec 2, 2019 at 7:49

3 Answers 3

3

I was facing with the exact same problem, what's worse, mine is failing silently - I didn't see any errors.

Solution #1 move if else condition to the inner scope of <template>

As David Japan pointed out, you can check if else condition in the inner scope of slot-scope:

<template slot-scope="scope">
  <span v-if="options.columns">one thing...</span>
  <span v-else>something else.</span>
</template>

Solution #2 use v-slot instead of slot-scope

<template v-slot="scope" v-if="options.columns">
  one thing...
</template>
<template v-slot="scope" v-else>
  something else.
</template>

However I don't know why v-slot fixes it, I searched both in the official documentation and online but no clues.

0

The solution is a workaround:

Create 2 different SFC for each possible use case and do conditional rendering.

Vuetify example:

// App.vue
<div>
  <ListMD v-if="this.$vuetify.breakpoint.name === 'md'" />
  <ListXS v-if="this.$vuetify.breakpoint.name === 'xs'" /> 
</div>
-1

In Vue.js component you cannot have more than one template tag.

Why not using 'is' property for dynamic component ?

<template>
   <div :is='my-component'></div>
</template>

So you can load a component dynamicaly.

https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

1
  • I am not trying to render two different components there. I get the idea but what I would really like to know is why does scope becomes undefined when paired with a code like this? Dec 2, 2019 at 8:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.