VueJS: using dynamic class names within the style attribute

Question

VueJS: using dynamic class names within the style attribute

Within my VueJS application, I have implemented Materializecss modals within single page components. Each modal requires a unique dynamic ID due to the application's requirements. The code snippet below showcases this:

<template>
    <div :id="modal_id" :class="'modal '+modal_id">
        <div class="modal-content">
            .... stuff here
        </div>
        <div class="modal-footer">
            <a class="modal-close waves-effect waves-green btn-flat">Exit</a>
        </div>
    </div>
</template>

<style type="text/css" scoped>
    .modal {
        width: 90% !important;
        height: 100% !important;
    }

    .modal_id 
    {
        background-color: black;
    }
</style>

<script type="text/javascript>
    import pdf from 'vue-pdf'

    export default {
        data: function() {
            return {
                modal_id: 'ViewPdf_'+this.$root.g(),    // this.$root.g() returns a unique integer          
            }
        },
    }
</script>

I am curious if it is achievable in Vue to dynamically modify the custom class name within the <style></style> tags to match the generated class name when the component is mounted. If not, I would appreciate any suggestions for potential workarounds.

<style type="text/css" scoped>
    .modal {
        width: 90% !important;
        height: 100% !important;
    }

    .modal_id  
    {
        background-color: black;
    }
</style>

javascript vue.js

Answer 1

Answer №1

When all the CSS is within your Vue component, it is easier to generate style information directly in your component instead of trying to align css selectors based on DOM id.

Instead of using:

<div :id="modal_id" :class="'modal '+modal_id">

You can use:

<div :id="modal_id" :style="modalStyle">

Then, inside your component, create a computed property for the style following the guidelines at https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles

For instance:

computed: {
  modalStyle: function () {
   return {backgroundColor: 'black'};
  }
}

Answer 2

When all the CSS is within your Vue component, it is easier to generate style information directly in your component instead of trying to align css selectors based on DOM id.

Instead of using:

<div :id="modal_id" :class="'modal '+modal_id">

You can use:

<div :id="modal_id" :style="modalStyle">

Then, inside your component, create a computed property for the style following the guidelines at https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles

For instance:

computed: {
  modalStyle: function () {
   return {backgroundColor: 'black'};
  }
}

Answer 3

Answer №2

To create a dynamic class name for a specific modal, you can establish a computed property that reacts to changes in the modal_id.

<template>
    <div :id="modal_id" :class="className">
        ...
    </div>
</template>
<script type="text/javascript>
    export default {
        data: function() {
            return {             
            }
        },
        computed: {
            className: function () {
                if (this.modal_id === <your modal_id1>) return 'class1';
                else if (this.modal_id === <your modal_id2>) return 'class2';
            },
            modal_id: function () {
                return 'ViewPdf_'+this.$root.g()
            }
        }
    }
</script>
<style>
    .class1{}
    .class2{}
</style>

If you want the modal_id to be dynamic as well, it should also be defined as a computed property.

Answer 4

To create a dynamic class name for a specific modal, you can establish a computed property that reacts to changes in the modal_id.

<template>
    <div :id="modal_id" :class="className">
        ...
    </div>
</template>
<script type="text/javascript>
    export default {
        data: function() {
            return {             
            }
        },
        computed: {
            className: function () {
                if (this.modal_id === <your modal_id1>) return 'class1';
                else if (this.modal_id === <your modal_id2>) return 'class2';
            },
            modal_id: function () {
                return 'ViewPdf_'+this.$root.g()
            }
        }
    }
</script>
<style>
    .class1{}
    .class2{}
</style>

If you want the modal_id to be dynamic as well, it should also be defined as a computed property.

Answer 5

Answer №3

Indeed, it is possible to modify the css property name using JavaScript when utilizing an external css file. I have provided a straightforward example below where I demonstrate how I altered the css name to apply its style to the second paragraph.

//determining the index of the stylesheet based on load order
var cssIndex = 0;
var cssRules = (document.all) ? 'rules' : 'cssRules';

function changeClass() {
    for (i = 0, len = document.styleSheets[cssIndex][cssRules].length; i < len; i++) {
        if (document.styleSheets[cssIndex][cssRules][i].selectorText === ".text") {
            document.styleSheets[cssIndex][cssRules][i].selectorText = ".text2";
            return;
        }
    }
}

.text {
text-align: center;
}

<button onclick='changeClass()'> Change css property class name </button>
<p id="1" class="text">This is text class</p>
<p id="2" class="text2"> This is text2 class</p>

You can easily implement this technique in your Vue code.

Answer 6

Indeed, it is possible to modify the css property name using JavaScript when utilizing an external css file. I have provided a straightforward example below where I demonstrate how I altered the css name to apply its style to the second paragraph.

//determining the index of the stylesheet based on load order
var cssIndex = 0;
var cssRules = (document.all) ? 'rules' : 'cssRules';

function changeClass() {
    for (i = 0, len = document.styleSheets[cssIndex][cssRules].length; i < len; i++) {
        if (document.styleSheets[cssIndex][cssRules][i].selectorText === ".text") {
            document.styleSheets[cssIndex][cssRules][i].selectorText = ".text2";
            return;
        }
    }
}

.text {
text-align: center;
}

<button onclick='changeClass()'> Change css property class name </button>
<p id="1" class="text">This is text class</p>
<p id="2" class="text2"> This is text2 class</p>

You can easily implement this technique in your Vue code.

VueJS: using dynamic class names within the style attribute

Answer №1

Answer №2

Answer №3

Similar questions

Top recommendation for transferring data from Laravel to Vue component

What steps can I take to resolve the CSP errors I am experiencing?

Optimizing Your HTML/CSS/JavaScript Project: Key Strategies for Modular

Which symbol or character corresponds to the public "get symbol" method?

The Art of Validating Forms in Vue.js

Having trouble locating the data-testid attribute within a Vue Component using Jest

Using jQuery to decrease the size of a div element containing an image

Animate sliding bar to move from the left using jQuery

What are the steps to implement timer control in Ajax using JavaScript?

Top solution for preventing text selection and image downloading exclusively on mobile devices

Vuejs did not have these dependencies within its codebase

Why does the API in Next Js get triggered multiple times instead of just once, even when the strict mode is set to false?

How to dynamically set Bootstrap navbar item as active based on current filename?

Use JavaScript to create a new window and load the HTML content from an external URL

Obtain a socket object from the Vuex store

Establishing global credentials in VueJS using Axios

Facing some unexpected issues with integrating Django and AngularJS, unclear on the cause

How to use getBoundingClientRect in React Odometer with React Visibility Sensor?

Obtain JSON data instead of XML data from a web service through Ajax with the option 'contentType' set to 'false'

Customize your MUI Select to show the selected value in a different way within the Input field