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.
-
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
3 Answers
Reset to default 4I 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
版权声明:本文标题:javascript - Conditional scoped slot templates in vue - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742220210a2435314.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论