How to access component variable inside style in single file in Vue JS

Question

Is there any vue plugin that can allows us to use template variable in side <style/> tag in Single File Components for e.g.

<template>

    <div>{{ display }}</div>

</template>


<script>

    export default {
        data(){
            return { display: 'block' }
        }
    }

</script>


<style>
    body {
        display: {{ display }}
    }
</style>

Any better way/plugin to do this??

I already have known about :style and :class

You would do this using CSS classes designed for this purpose, not by directly manipulating CSS rules. — connexo
– connexo, Commented Mar 9, 2018 at 14:17
Yes I got you! but when we want @media css manipulation then its become issue! — Yogesh Jagdale
– Yogesh Jagdale, Commented Mar 9, 2018 at 14:19
I don't see how that use case would require any different approach. — connexo
– connexo, Commented Mar 9, 2018 at 14:20
@connexo think like you want different image on desktop and different image on mobile! — Yogesh Jagdale
– Yogesh Jagdale, Commented Mar 9, 2018 at 14:24

Leo Li · Accepted Answer · 2018-09-30 21:10:35Z

3

I think there is no way to access the Vue model (data layer) inside <Style> in the current version of Vue. Vue only control the DOM tree but not help you work around on CSSOM.

You are probably using WebPack or other bundler and writing modularized component in single file where you have <template>, <script>, and <style>. Your bundler will have a way to convert <template> into Vue render function, but style here is purely css and will be bundled into a single css file.

If you want to set a styling value dynamically that controlled by your component, you need to find a way to inject them in run-time, i.e. using the Vue version of styled-component (as they came from React originally). But you will lose the caching ability, unless you also save the value in localStorage.

answered Sep 30, 2018 at 21:10

Leo Li

2574 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 01:09:45Z

-1

https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

You can put whatever you want in your style attribute by binding inline styles:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

edited Jul 15, 2022 at 1:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 9, 2018 at 14:22

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

1 Comment

DobleL Over a year ago

"I already have known about :style and :class" said on the Question, please don't put a generic answer

Collectives™ on Stack Overflow

How to access component variable inside style in single file in Vue JS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related