Vue.js: Can't compile SASS styles for a dynamically-created HTML element

Question

I have a simple Vue.js component in which I render a piece of HTML:

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

On click, the toggleButton() method updates the button data:

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

Notice the <span></span> element in the else.

What is happening, is I am unable to style this span element within my component - presumably because it's dynamically created:

<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. The child span doesn't.

How do I apply styles on a dynamically added HTML element inside of a Vue.js component?

Niklesh Raut · Accepted Answer · 2017-10-24 10:38:37Z

1

Its working in root component and child component both

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

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

Here is the Nice and cleaner way to update 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>

edited Oct 24, 2017 at 10:38

answered Oct 24, 2017 at 10:12

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

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

4 Comments

Niklesh Raut Over a year ago

@lesssugar : Can you add live demo for this ?

Niklesh Raut Over a year ago

@lesssugar : check my updated answer working in root/child component both

lesssugar Over a year ago

Thanks. I will check this one out. Still would be nice to know how to handle styles for dynamically added HTML using v-html as in my case.

Niklesh Raut Over a year ago

@lesssugar : if you think it would not work by adding html on button click I also updated code for that, its working too

Collectives™ on Stack Overflow

Vue.js: Can't compile SASS styles for a dynamically-created HTML element

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related