javascript - Conditional scoped slot templates in vue - Stack Overflow

admin管理员组

文章数量:1327690

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 bees undefined. The moment I remove v-if, else and use scope it works as expected.

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 bees undefined. The moment I remove v-if, else and use scope it works as expected.

• javascript
• vue.js
• templates

Share Follow asked Dec 2, 2019 at 7:26 Praveen PugliaPraveen Puglia 5,64155 gold badges3838 silver badges7070 bronze badges 3

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

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>

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

Why not using 'is' property for dynamic ponent ?

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

So you can load a ponent dynamicaly.

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

本文标签： javascriptConditional scoped slot templates in vueStack Overflow