How to change background color on click in vue

Question

I am trying to change the background colour of an element on click of it using vue but it doesn't change, this is what i have come up with so far, also the onclick method has two functions and I read that this is the best way to input to onclick events in vue.

 <div id="exercise">

    <div>
      <p>Current Value: {{ value }}</p>
      <button @click="value += 5(); red();" :style="{ 'background-color': color }">Add 5</button>
      <button @click="value += 1">Add 1</button>
      <p>{{ result }}</p>
    </div>

    <div>
      <input type="text" v-model="timer">
      <p>{{ value }}</p>
    </div> 
  </div>

js

new Vue({
  el: "#exercise",
  data: {
    value: 0,
    timer: 1000,


  },
  methods:{
  red() {
   this.color = "red";
  }
  },
  computed: {
    result: function() {
      return this.value >= 37 ? "Not there yet" : "done";
    }
  },
  watch: {
    result: function(value) {
      var vm = this;
      console.log(value);
      setTimeout(function() {
        vm.value = 0;
      }, 5000);
    }
  } 
});

tony19 · Accepted Answer · 2022-07-15 00:45:28Z

3

In data you must insert

data: {
   value: 0,
   timer: 1000,
   color: null
},

and try use correct syntax: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

<button @click="value += 5(); red();" :style="{backgroundColor: color }">Add 5</button>

edited Jul 15, 2022 at 0:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 18, 2020 at 10:51

ClodClod91

3141 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

How to change background color on click in vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related