v-if on style block
Is it possible to use v-if on style block, like so?
<style lang="scss" v-if="pinkTheme">
.ac-textfield
{
background: hotpink;
}
</style>
I tried this and it's not working (the v-if directive is ignored). I know that I could do this:
<div class="ac-textfield" v-style="{ background: pinkTheme ? 'hotpink' : false }"></div>
However, this will quickly become difficult to maintain if I want to modulate more than one style using the value of pinkTheme. Right now, I'm using CSS selectors to achieve the desired effect:
<template>
<div class="ac-textfield" :class="{ pinkTheme }">
</div>
</template>
<style lang="scss">
.ac-textfield
{
//...
}
.ac-textfield.pink-theme
{
background: hotpink;
}
</style>
However, I don't like this solution very much (I want to achieve greater separation between my themes, and I want the browser to only have to load one theme at a time). Is there any way to make something like the first code block work?
vue.js vue-component
asked Nov 23 '18 at 2:48
laptoulaptou
1,8561121
add a comment |
Is it possible to use v-if on style block, like so?
<style lang="scss" v-if="pinkTheme">
.ac-textfield
{
background: hotpink;
}
</style>
I tried this and it's not working (the v-if directive is ignored). I know that I could do this:
<div class="ac-textfield" v-style="{ background: pinkTheme ? 'hotpink' : false }"></div>
However, this will quickly become difficult to maintain if I want to modulate more than one style using the value of pinkTheme. Right now, I'm using CSS selectors to achieve the desired effect:
<template>
<div class="ac-textfield" :class="{ pinkTheme }">
</div>
</template>
<style lang="scss">
.ac-textfield
{
//...
}
.ac-textfield.pink-theme
{
background: hotpink;
}
</style>
However, I don't like this solution very much (I want to achieve greater separation between my themes, and I want the browser to only have to load one theme at a time). Is there any way to make something like the first code block work?
vue.js vue-component
asked Nov 23 '18 at 2:48
laptoulaptou
1,8561121
add a comment |
Is it possible to use v-if on style block, like so?
<style lang="scss" v-if="pinkTheme">
.ac-textfield
{
background: hotpink;
}
</style>
I tried this and it's not working (the v-if directive is ignored). I know that I could do this:
<div class="ac-textfield" v-style="{ background: pinkTheme ? 'hotpink' : false }"></div>
However, this will quickly become difficult to maintain if I want to modulate more than one style using the value of pinkTheme. Right now, I'm using CSS selectors to achieve the desired effect:
<template>
<div class="ac-textfield" :class="{ pinkTheme }">
</div>
</template>
<style lang="scss">
.ac-textfield
{
//...
}
.ac-textfield.pink-theme
{
background: hotpink;
}
</style>
However, I don't like this solution very much (I want to achieve greater separation between my themes, and I want the browser to only have to load one theme at a time). Is there any way to make something like the first code block work?
vue.js vue-component
asked Nov 23 '18 at 2:48
laptoulaptou
1,8561121
Is it possible to use v-if on style block, like so?
<style lang="scss" v-if="pinkTheme">
.ac-textfield
{
background: hotpink;
}
</style>
I tried this and it's not working (the v-if directive is ignored). I know that I could do this:
<div class="ac-textfield" v-style="{ background: pinkTheme ? 'hotpink' : false }"></div>
However, this will quickly become difficult to maintain if I want to modulate more than one style using the value of pinkTheme. Right now, I'm using CSS selectors to achieve the desired effect:
<template>
<div class="ac-textfield" :class="{ pinkTheme }">
</div>
</template>
<style lang="scss">
.ac-textfield
{
//...
}
.ac-textfield.pink-theme
{
background: hotpink;
}
</style>
However, I don't like this solution very much (I want to achieve greater separation between my themes, and I want the browser to only have to load one theme at a time). Is there any way to make something like the first code block work?
vue.js vue-component
vue.js vue-component
asked Nov 23 '18 at 2:48
laptoulaptou
1,8561121
asked Nov 23 '18 at 2:48
laptoulaptou
1,8561121
asked Nov 23 '18 at 2:48
laptoulaptou
1,8561121
asked Nov 23 '18 at 2:48
laptoulaptou
1,8561121
asked Nov 23 '18 at 2:48
laptoulaptou
1,8561121
1,8561121
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
That cannot work as scss must be compiled to css - and this is done at build-time. v-if, though, is executed/interpreted at run-time only.
What would kind of work, is to include the style block in the template part of your single file vue component, but note that you can only use CSS, not SCSS, in there. That has the obvious downside of getting rendered alongside each of the component instances.
Your approach of using conditional CSS classes actually is the correct approach, so you should definitely stick to that.
answered Nov 23 '18 at 2:54
connexoconnexo
22.7k83762
I thought it might work, because eachstyleblock is compiled into a webpack module, right? What stops Vue.js from simply loading and unloading these modules based on the condition? I realise that doing this directly would introduce a dependency on webpack, but doesn't the idea make sense?
– laptou
Nov 23 '18 at 3:39
Anyway, thank you for the answer.
– laptou
Nov 23 '18 at 3:39
@laptou, I think your idea makes a ton of sense. I have a similar need. The best thing I found was the condition-loader webpack loader. If you can get past the low usage and Chinese instructions, it seems perfect (for my use case, anyway). Hopefully you'll find it useful too.
– tylertrotter
Jan 2 at 19:00
add a comment |
v-if is used for conditional html rendering and v-if accept the getter function that should return either true or false. You can't use v-if with style.
answered Nov 23 '18 at 2:55
Atul BansodeAtul Bansode
112
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440094%2fv-if-on-style-block%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
That cannot work as scss must be compiled to css - and this is done at build-time. v-if, though, is executed/interpreted at run-time only.
What would kind of work, is to include the style block in the template part of your single file vue component, but note that you can only use CSS, not SCSS, in there. That has the obvious downside of getting rendered alongside each of the component instances.
Your approach of using conditional CSS classes actually is the correct approach, so you should definitely stick to that.
answered Nov 23 '18 at 2:54
connexoconnexo
22.7k83762
I thought it might work, because eachstyleblock is compiled into a webpack module, right? What stops Vue.js from simply loading and unloading these modules based on the condition? I realise that doing this directly would introduce a dependency on webpack, but doesn't the idea make sense?
– laptou
Nov 23 '18 at 3:39
Anyway, thank you for the answer.
– laptou
Nov 23 '18 at 3:39
@laptou, I think your idea makes a ton of sense. I have a similar need. The best thing I found was the condition-loader webpack loader. If you can get past the low usage and Chinese instructions, it seems perfect (for my use case, anyway). Hopefully you'll find it useful too.
– tylertrotter
Jan 2 at 19:00
add a comment |
That cannot work as scss must be compiled to css - and this is done at build-time. v-if, though, is executed/interpreted at run-time only.
What would kind of work, is to include the style block in the template part of your single file vue component, but note that you can only use CSS, not SCSS, in there. That has the obvious downside of getting rendered alongside each of the component instances.
Your approach of using conditional CSS classes actually is the correct approach, so you should definitely stick to that.
answered Nov 23 '18 at 2:54
connexoconnexo
22.7k83762
I thought it might work, because eachstyleblock is compiled into a webpack module, right? What stops Vue.js from simply loading and unloading these modules based on the condition? I realise that doing this directly would introduce a dependency on webpack, but doesn't the idea make sense?
– laptou
Nov 23 '18 at 3:39
Anyway, thank you for the answer.
– laptou
Nov 23 '18 at 3:39
@laptou, I think your idea makes a ton of sense. I have a similar need. The best thing I found was the condition-loader webpack loader. If you can get past the low usage and Chinese instructions, it seems perfect (for my use case, anyway). Hopefully you'll find it useful too.
– tylertrotter
Jan 2 at 19:00
add a comment |
That cannot work as scss must be compiled to css - and this is done at build-time. v-if, though, is executed/interpreted at run-time only.
What would kind of work, is to include the style block in the template part of your single file vue component, but note that you can only use CSS, not SCSS, in there. That has the obvious downside of getting rendered alongside each of the component instances.
Your approach of using conditional CSS classes actually is the correct approach, so you should definitely stick to that.
answered Nov 23 '18 at 2:54
connexoconnexo
22.7k83762
That cannot work as scss must be compiled to css - and this is done at build-time. v-if, though, is executed/interpreted at run-time only.
What would kind of work, is to include the style block in the template part of your single file vue component, but note that you can only use CSS, not SCSS, in there. That has the obvious downside of getting rendered alongside each of the component instances.
Your approach of using conditional CSS classes actually is the correct approach, so you should definitely stick to that.
answered Nov 23 '18 at 2:54
connexoconnexo
22.7k83762
answered Nov 23 '18 at 2:54
connexoconnexo
22.7k83762
answered Nov 23 '18 at 2:54
connexoconnexo
22.7k83762
answered Nov 23 '18 at 2:54
connexoconnexo
22.7k83762
22.7k83762
I thought it might work, because eachstyleblock is compiled into a webpack module, right? What stops Vue.js from simply loading and unloading these modules based on the condition? I realise that doing this directly would introduce a dependency on webpack, but doesn't the idea make sense?
– laptou
Nov 23 '18 at 3:39
Anyway, thank you for the answer.
– laptou
Nov 23 '18 at 3:39
@laptou, I think your idea makes a ton of sense. I have a similar need. The best thing I found was the condition-loader webpack loader. If you can get past the low usage and Chinese instructions, it seems perfect (for my use case, anyway). Hopefully you'll find it useful too.
– tylertrotter
Jan 2 at 19:00
add a comment |
I thought it might work, because eachstyleblock is compiled into a webpack module, right? What stops Vue.js from simply loading and unloading these modules based on the condition? I realise that doing this directly would introduce a dependency on webpack, but doesn't the idea make sense?
– laptou
Nov 23 '18 at 3:39
Anyway, thank you for the answer.
– laptou
Nov 23 '18 at 3:39
@laptou, I think your idea makes a ton of sense. I have a similar need. The best thing I found was the condition-loader webpack loader. If you can get past the low usage and Chinese instructions, it seems perfect (for my use case, anyway). Hopefully you'll find it useful too.
– tylertrotter
Jan 2 at 19:00
I thought it might work, because each
style block is compiled into a webpack module, right? What stops Vue.js from simply loading and unloading these modules based on the condition? I realise that doing this directly would introduce a dependency on webpack, but doesn't the idea make sense?– laptou
Nov 23 '18 at 3:39
I thought it might work, because each
style block is compiled into a webpack module, right? What stops Vue.js from simply loading and unloading these modules based on the condition? I realise that doing this directly would introduce a dependency on webpack, but doesn't the idea make sense?– laptou
Nov 23 '18 at 3:39
Anyway, thank you for the answer.
– laptou
Nov 23 '18 at 3:39
Anyway, thank you for the answer.
– laptou
Nov 23 '18 at 3:39
@laptou, I think your idea makes a ton of sense. I have a similar need. The best thing I found was the condition-loader webpack loader. If you can get past the low usage and Chinese instructions, it seems perfect (for my use case, anyway). Hopefully you'll find it useful too.
– tylertrotter
Jan 2 at 19:00
@laptou, I think your idea makes a ton of sense. I have a similar need. The best thing I found was the condition-loader webpack loader. If you can get past the low usage and Chinese instructions, it seems perfect (for my use case, anyway). Hopefully you'll find it useful too.
– tylertrotter
Jan 2 at 19:00
add a comment |
v-if is used for conditional html rendering and v-if accept the getter function that should return either true or false. You can't use v-if with style.
answered Nov 23 '18 at 2:55
Atul BansodeAtul Bansode
112
add a comment |
v-if is used for conditional html rendering and v-if accept the getter function that should return either true or false. You can't use v-if with style.
answered Nov 23 '18 at 2:55
Atul BansodeAtul Bansode
112
add a comment |
v-if is used for conditional html rendering and v-if accept the getter function that should return either true or false. You can't use v-if with style.
answered Nov 23 '18 at 2:55
Atul BansodeAtul Bansode
112
v-if is used for conditional html rendering and v-if accept the getter function that should return either true or false. You can't use v-if with style.
answered Nov 23 '18 at 2:55
Atul BansodeAtul Bansode
112
answered Nov 23 '18 at 2:55
Atul BansodeAtul Bansode
112
answered Nov 23 '18 at 2:55
Atul BansodeAtul Bansode
112
answered Nov 23 '18 at 2:55
Atul BansodeAtul Bansode
112
112
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440094%2fv-if-on-style-block%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
