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

Answer 1

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.