Issue in Vue.js: Struggling to compile SASS styles for an HTML element generated dynamically

Question

Issue in Vue.js: Struggling to compile SASS styles for an HTML element generated dynamically

I'm working with a basic Vue.js component where I'm rendering a snippet of HTML:

...
<div class="sml-button" v-on:click="toggleButton()" v-html="button"></div>
...

When the button is clicked, the toggleButton() function updates the button data:

toggleButton: function() {
    if (this.shouldBeShown) {
        this.button = 'show less';
    } else {
        this.button = '<span>...</span>show more';    
    }
}

Take note of the <span></span> element in the else condition.

The issue I'm facing is that I can't style this dynamically created span element within my component:

<style lang="sass" scoped>
    .sml-button {
        color: #4390ca;
        font-size: 14px;
        font-family: latoregular, Helvetica, Arial, sans-serif;
        span {
            color: #3f3f3f; /* THIS WON'T BE COMPILED */
        }
    }
</style>

The parent class (.sml-button) has its styles, while the child span does not.

How can I apply styles to a dynamically added HTML element inside a Vue.js component?

javascript vue.js

Answer 1

Answer №1

It is functioning in both the root component and child component.

<template>
  <template v-if="childDataLoaded">
    <child-cmp :value="childData"></child-cmp>
  </template>
</template>

<script>
  export default{
    data(){
        childDataLoaded: false,
        childData : [];
     },
     methods:{
      fetchInitialData(){
        //fetch from server then
         this.childData = res.data.items;
         this.childDataLoaded = true;
         console.log(res.data.items) //contains some values
       }
     }
   components:{
     childcmp
    },
   mounted(){
     this.fetchInitialData();
     }
    }
 </script>

Here is a more elegant and tidy method to update the child component.

var child = Vue.extend({
    template: "<div>Child Component : <span class='light-blue'>My dynamicHTML</span></div>"
});
var app = new Vue({
    el: "#vue-instance",
    data: {
        dynamicHTML:"Root Component : <span class='light-blue'>My dynamicHTML</span>"
    },
    methods : {
      changeHTML: function(){
        this.dynamicHTML = "Root Component Changed : <span class='light-green'>My dynamicHTML</span>"
      }
    },
    components: {
        child
    },
})

.light-blue{
  color : #f00;
}
.light-green{
  color : #0f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
    <div v-html="dynamicHTML"></div>
    <child></child>
    <button v-on:click="changeHTML">Change HTML</button>
</div>

Answer 2

It is functioning in both the root component and child component.

<template>
  <template v-if="childDataLoaded">
    <child-cmp :value="childData"></child-cmp>
  </template>
</template>

<script>
  export default{
    data(){
        childDataLoaded: false,
        childData : [];
     },
     methods:{
      fetchInitialData(){
        //fetch from server then
         this.childData = res.data.items;
         this.childDataLoaded = true;
         console.log(res.data.items) //contains some values
       }
     }
   components:{
     childcmp
    },
   mounted(){
     this.fetchInitialData();
     }
    }
 </script>

Here is a more elegant and tidy method to update the child component.

var child = Vue.extend({
    template: "<div>Child Component : <span class='light-blue'>My dynamicHTML</span></div>"
});
var app = new Vue({
    el: "#vue-instance",
    data: {
        dynamicHTML:"Root Component : <span class='light-blue'>My dynamicHTML</span>"
    },
    methods : {
      changeHTML: function(){
        this.dynamicHTML = "Root Component Changed : <span class='light-green'>My dynamicHTML</span>"
      }
    },
    components: {
        child
    },
})

.light-blue{
  color : #f00;
}
.light-green{
  color : #0f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
    <div v-html="dynamicHTML"></div>
    <child></child>
    <button v-on:click="changeHTML">Change HTML</button>
</div>

Issue in Vue.js: Struggling to compile SASS styles for an HTML element generated dynamically

Answer №1

Similar questions

React is struggling to dynamically update text content using button click events

Is the 'wait > remaining' condition ever satisfied in the throttle function of underscore.js?

Challenges with sending JSON encoded Arrays from WordPress to PHP results in empty or NULL responses

Best practices for alerting using React and Redux

Create a custom Android home screen widget using JavaScript or another programming language

What are the steps to transform a blob into an xlsx or csv file?

Modify meta titles according to specific url #id

Choose a specific <div> element from an external page using Ajax/PHP

Trying to configure and use two joysticks at the same time using touch events

Angular does not update the progress bar

Troubleshooting Subtle Validation (on the front end)

Troubleshooting problem with cookies in express-session

Using the v-for directive before applying the Vue directive

Explain the inner workings of the setTimeout() function in JavaScript

How can I retrieve the updated input value once a specific key has been pressed in the prototype?

React-querybuilder experiencing issues with validator functionality

Is it possible to incorporate an additional value into the jQuery widget 'Autocomplete' by using a second variable?

implement a data update feature in a Vue application using methods and Axios to manipulate

Bug in Async.js causes unexpected results in loop involving numbers

What is the best way to sort a combination of numbers and text strings?