how to change css background in vue js?

Question

I am try to change the background color of slider.But my code is not working properly. Can anyone help me please?

here is my code

html

<a href="#" @click.prevent="redColor">Change Color</a>
<input type="range" :class="{background:fillColor}" class="slider-range" id="range" value="0" name="range" min="0" step="1" max="8">

js code

     var vm = new Vue({

          el:'#app',
          data:{
            fillColor:''
          },
          methods:{
            redColor:function(){
                this.fillColor = 'linear-gradient(90deg, #f5f4f4 0, rgb(209, 39, 16) 100%)';


            },

          }

     });

You are setting the class, not the style on the element… although I do recommend setting/changing the class and then use CSS to apply the linear-gradient style to that class. — Stephen P
– Stephen P, Commented Apr 13, 2020 at 19:55
Ask yourself — "Why am I setting the background to red?" — is it because this is now the active element? because it is invalid? Those are states, and classes are excellent for representing states on elements. Now you might have <input type="range" class="active"…> where you'll be adding & removing the "active" class as needed. Then create a style in CSS that says input.active { …linear-gradient(… } — No more fiddling with styles in your code, which shouldn't care about style, it should care about state. — Stephen P
– Stephen P, Commented Apr 13, 2020 at 20:27

Hédi Ben Chiboub · Accepted Answer · 2020-04-13 19:57:22Z

1

Switch

:class="{background:fillColor}"

to

:style="{background:fillColor}"

answered Apr 13, 2020 at 19:57

Hédi Ben Chiboub

1453 silver badges17 bronze badges

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

Comments

Adam Berry · Accepted Answer · 2020-04-13 20:03:12Z

0

Try this! You could use :style but I try to stay away from inline CSS even with scoped styling.

HTML

<a href="#" v-on:click="bgColor='red-color'">Change Color</a>
<input type="range" :class="bgColor" class="slider-range" id="range" value="0" name="range" min="0" step="1" max="8">

<style scoped>
.red-color {
    background: linear-gradient(90deg, #f5f4f4 0, rgb(209, 39, 16) 100%);
}
</style>

JS

var vm = new Vue({
    el:'#app',
    data:{
        bgColor:''
    },
    methods:{
    }
});

answered Apr 13, 2020 at 20:03

Adam Berry

1381 silver badge3 bronze badges

Collectives™ on Stack Overflow

how to change css background in vue js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related